/* wmx80_css  */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

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

fieldset, img, a {
    border: 0
}

dl, dt, dd, ul, ol, li, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    list-style: none
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    line-height: 1.2
}

audio, canvas, video, progress {
    display: inline-block;
    vertical-align: baseline
}

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

a {
    color: #696969;
    cursor: pointer;
    outline: none;
    blr: expression(this.onFocus=this.blur()); /*-webkit-transition: all 0.3s ease-out;    transition: all 0.3s ease-out;*/
    text-decoration: none
}

/*a:after {-webkit-transition: .3s cubic-bezier(0.68, -.55, .265, 1.55); -moz-transition: .3s cubic-bezier(0.68, -.55, .265, 1.55); -o-transition: .3s cubic-bezier(0.68, -.55, .265, 1.55); transition: .3s cubic-bezier(0.68, -.55, .265, 1.55); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); position: absolute; content: ""; left: 50%; right: 50%; bottom: 0;}*/
a:hover {
    text-decoration: none;
    outline: none;
}

input, textarea {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

button, input, textarea, select, optgroup, option, file {
    font: inherit;
    outline: none;
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

::-moz-focus-inner {
    border-color: transparent
}

::-moz-selection {
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    background: #3d90ee;
    text-shadow: none
}

::selection {
    color: #fff;
    color: rgba(255, 255, 255, 0.9);
    background: #3d90ee;
    text-shadow: none
}

input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0
}

video:focus, div:focus {
    outline: none
}

/*pre, code {white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word}*/
/*html, body {
    margin: 0;
    font-size: 14px;
    padding: 0px;
    font-family: "Lantinghei SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica neue", Helvetica, Tahoma, Arial, "微软雅黑", "宋体", "黑体";
    font-weight: 100;
}*/

.cl {
    height: 0;
    font-size: 1px;
    clear: both;
    line-height: 0;
}

nav, footer, section, header, article {
    display: block;
}

i, em, ins, u {
    font-style: normal;
    text-decoration: none
}

*:focus {
    outline: none
}

.wrap, .content {
    margin: 0 auto; /*-webkit-transition: all 0.6s ease-out;*/ /*transition: all 0.6s ease-out;*/
    width: 1200px;
}

.none {
    display: none !important
}

.none1 {
    display: none
}

.fl {
    float: left
}

.fr {
    float: right
}

.pr {
    position: relative
}

.pa {
    position: absolute
}

.oh {
    overflow: hidden
}

.clearfix {
    *zoom: 1;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.bornone {
    border: none !important
}

.mindwd {
    min-width: 1200px;
}

input[type="submit"], input[type="reset"], input[type="button"], button {
    -webkit-appearance: none;
}

input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 0;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-track:hover {
    background: #eee;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #b9b9b9;
}

::-webkit-scrollbar-thumb:hover {
    background: #747474;
}

::-webkit-scrollbar-thumb:active {
    background: #555;
}

.unselectable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/*******公共样式结束*********/
.sitetop {
    background: #f6f6f6;
    font-size: 12px;
    line-height: 32px;
    border-bottom: 1px solid #eaeaea;
}

.sitetop span {
    display: block;
    float: left;
    color: #dddddd;
}

.sitetop span a {
    color: #999999;
    margin: 0 12px;
    position: relative;
    display: inline-block;
    height: 32px;
    line-height: 32px;
}

.sitetop i {
    display: block;
    float: right;
    color: #999999;
}

/*首页*/
.header { /* height: 60px; */
    position: relative;
    z-index: 99;
    background: #fff;
}

.header .logo a {
    display: block;
    line-height: 65px;
    width: 105px;
    text-align: center;
    height: 65px;
    overflow: hidden;
}

.header .logo i {
    font-size: 60px;
    color: #1fd3cd;
}

.header .nav {
    text-align: center;
    height: 65px;
    font-size: 14px;
    color: #010101; /*margin-left: 320px;*/
}

.header .nav a {
    display: inline-block;
    color: #010101;
    margin: 0 35px;
    line-height: 65px;
    position: relative;
    font-weight: 500;
}

.header .nav a.on {
    color: #1fd3cd;
}

.header .nav a.on:after {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 0;
    height: 2px;
    -webkit-transition: .3s cubic-bezier(0.68, -.55, .265, 1.55);
    -moz-transition: .3s cubic-bezier(0.68, -.55, .265, 1.55);
    -o-transition: .3s cubic-bezier(0.68, -.55, .265, 1.55);
    transition: .3s cubic-bezier(0.68, -.55, .265, 1.55);
    width: 26px;
    background: #1fd3cd;
    color: #1fd3cd;
}

.header .nav a:hover {
    color: #1fd3cd;
}

.header .login {
    margin-right: 12px;
}

.header .dlq {
    text-align: center;
    padding-top: 14px;
    padding-right: 20px;
}

.header .dlq a {
    height: 34px;
    line-height: 34px;
    border-radius: 3px;
    background: #3bc9bb;
    width: 92px;
    display: block;
    font-size: 14px;
    color: #fff; /* box-shadow: 0 3px 24px rgba(30,161,151,.5); */
}

.header .dlq a:hover {
    background: #21e5de;
}

.header .dlh {
    position: relative;
}

.header .dlh span {
    display: block;
    line-height: 60px;
    color: #010101;
    text-align: center;
    font-size: 14px;
}

.header .dlh span a {
    color: #010101;
}

.header .dlh ul {
    position: absolute;
    top: 60px;
    left: 50%;
    background: #fff;
    width: 120px;
    border-radius: 4px;
    overflow: hidden;
    z-index: 9999;
    text-align: center;
    opacity: 0;
    transform: translate3d(-50%, 10px, 0px);
    -moz-transform: translate3d(-50%, 10px, 0px);
    -webkit-transform: translate3d(-50%, 10px, 0px);
    visibility: hidden;
    line-height: 44px;
}

.header .dlh ul li a {
    display: block;
    color: #333333;
}

.header .dlh ul li a:hover {
    background: #f5f9fb;
    color: #38cdc0;
}

.header .dlh:hover ul {
    opacity: 1;
    transform: translate3d(-50%, 0px, 0px);
    -moz-transform: translate3d(-50%, 0px, 0px);
    -webkit-transform: translate3d(-50%, 0px, 0px);
    visibility: visible;
    transition: all 0.3s ease 0s;
}

.header .dlh span:after {
    display: block;
    content: '';
    border-width: 6px 4px 4px 4px;
    border-style: solid;
    border-color: #010101 transparent transparent transparent; /* 定位 */
    position: absolute;
    right: -12px;
    top: 50%;
    margin-top: -3px;
}

.header .dlh:hover span:after {
    border-width: 4px 4px 6px 4px;
    border-style: solid;
    border-color: transparent transparent #010101 transparent; /* 定位 */
    position: absolute;
    right: -12px;
    top: 50%;
    margin-top: -7px;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    position: relative;
    top: -3px;
    border-top: 4px dashed;
    border-top: 4px solid \9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.videobanner {
    height: 490px;
    background: url(/static/images/bannerbg.jpg) no-repeat center;
    min-width: 1200px;
    overflow: hidden;
    position: relative;
}

.videobanner .wrap {
    height: 490px;
}

.videobanner .videos {
    width: 100%;
    height: 490px;
    position: absolute;
    top: 0;
    left: 0;
}

.videobanner .videos video {
    top: 50%;
    left: 50%;
    min-height: 490px;
    width: 1920px;
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.videobanner .word {
    padding-top: 110px;
    text-align: center;
    color: #fff;
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
}

.videobanner .word h2 {
    display: block;
    font-size: 36px;
    letter-spacing: 3px;
}

.videobanner .word span {
    font-size: 20px;
    display: block;
    padding: 35px 0;
}

.videobanner .word .tutorial {
    font-size: 15px;
    padding: 10px 0;
}

.videobanner .word .tutorial a {
    color: #cccccc;
}

.videobanner .word .tutorial a:hover {
    color: #FFFFFF;
}

.videobanner .word > i {
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 3px;
    background: #4dd3c5;
}

.videobanner .btn {
    position: relative;
    width: 186px;
    height: 60px;
    border-radius: 30px;
    margin: 32px auto 0;
    padding: 6px;
}

.videobanner .btn a {
    display: block;
    color: #fff;
    text-align: center;
    font-size: 18px;
    border-radius: 24px;
    height: 48px;
    line-height: 48px;
    background: #4dd3c5;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 174px;
}

.videobanner .btn ins {
    position: absolute;
    display: block;
    border-radius: 30px;
    height: 60px;
    width: 186px;
    left: 0;
    top: 0;
    background: rgba(58, 229, 196, .2);
}

.videobanner .btn:hover ins {
    -webkit-transform: scale(1.2);
    opacity: .2;
    -webkit-animation: zdjpop 1s infinite;
}

.cjtitle {
    padding: 46px 0 36px;
    text-align: center;
    color: #7c7c7c;
    font-size: 14px;
}

.cjtitle h2 {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #2f2f2f;
    padding-bottom: 30px;
}

.cjtitle .webtitles {
    padding-bottom: 35px;
}

.cjtitle .webtitles i {
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 16px;
    color: #696969;
    margin: 0 30px;
}

.cjtitle .webtitles i.on, .cjtitle .webtitles i:hover {
    border-color: #4dd3c5;
}

.cjtitle .contm a {
    display: inline-block;
    border: 1px solid #dfdfdf;
    height: 36px;
    line-height: 34px;
    color: #7c7c7c;
    border-radius: 18px;
    padding: 0 16px;
    overflow: hidden;
    margin: 0 2px;
    min-width: 90px;
}

.cjtitle .contm a.on, .cjtitle .contm a:hover {
    border-color: #4dd3c5;
    background: #4dd3c5;
    color: #fff;
}

@-webkit-keyframes janim {
    0% {
        -webkit-transform: scale(0.2);
    }
    50% {
        -webkit-transform: scale(1.2);
    }
    100% {
        -webkit-transform: scale(1);
    }
}

@-webkit-keyframes zdjpop {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
    100% {
        opacity: 0.2;
        -webkit-transform: scale(1.2);
    }
}

.indprocess {
    padding: 75px 0 120px;
    background: #fff;
}

.indprocess .title {
    text-align: center;
}

.indprocess .title b {
    color: #333333;
    font-size: 24px;
    display: block;
    font-weight: normal;
}

.indprocess .title p {
    color: #999;
    font-size: 14px;
    display: block;
    padding-top: 12px;
}

.indprocess ul {
    padding-top: 65px;
    text-align: center;
    margin: 0 auto;
    width: 823px;
}

.indprocess ul li {
    display: block;
    float: left;
}

.indprocess ul li img {
    display: block;
    margin: 0 auto;
}

.indprocess ul li ins {
    display: block;
    padding: 55px;
}

.indprocess ul li em {
    display: block;
    padding-top: 25px;
}

.indprocess .btn {
    padding-top: 86px;
}

.indprocess .btn a {
    display: block;
    width: 150px;
    height: 40px;
    background: #4dd3c5;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    line-height: 40px;
    margin: 0 auto;
}

.indscene {
    min-width: 1200px;
}

.indscene .title {
    text-align: center;
    padding-bottom: 60px;
    font-size: 24px;
    color: #333333;
    font-weight: normal;
}

.indscene ul {
    overflow: hidden;
}

.indscene ul li {
    float: left;
    width: 16.666%;
    position: relative;
    background: #000;
    overflow: hidden;
}

.indscene ul li img {
    display: block;
    width: 100%;
    -webkit-transition: transform .6s ease-out;
    -o-transition: transform .6s ease-out;
    transition: transform .6s ease-out;
}

.indscene ul li.tlib {
    width: 33.333%;
}

.indscene ul li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    text-align: center;
    background: rgba(77, 211, 197, 0);
}

.indscene ul li i {
    display: block;
    position: absolute;
    top: 50%;
    color: #fff;
    font-size: 18px;
    margin-top: -48px;
    left: 0;
    width: 100%;
    height: 96px;
    padding-top: 50px;
    -webkit-transition: padding .6s ease-out;
    transition: padding .6s ease-out;
}

.indscene ul li a:hover {
    background: rgba(77, 211, 197, 0.9);
}

.indscene ul li a:hover i {
    background: url("/static/images/areos.png") no-repeat top center;
    padding-top: 70px;
}

.indscene ul li:hover img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.indscene ul li.on i {
    background: url(/static/images/areos.png) no-repeat top center;
    padding-top: 70px;
}

.indservice {
    height: 725px;
    background: #fff url(/static/images/indps.jpg) no-repeat bottom center;
    min-width: 1200px;
}

.indservice .title {
    text-align: center;
    color: #333333;
    font-size: 24px;
    padding-top: 120px;
}

.indcase {
    height: 555px;
    background: #eff3f5;
    padding: 60px 0;
    min-width: 1200px;
}

.indcase .title {
    text-align: center;
    color: #333333;
    font-size: 24px;
    font-weight: normal;
}

.indcase .cont {
    position: relative;
    margin-top: 40px;
}

.indcase .cont .hd .prev, .indcase .cont .hd .next {
    display: none
}

.indcase .cont .hd ul {
    position: absolute;
    bottom: -40px;
    left: 0;
    text-align: center;
    width: 100%;
    right: 0px;;
}

.indcase .cont .hd ul li {
    width: 10px;
    height: 10px;
    overflow: hidden;
    margin: 0 6px;
    border-radius: 50%;
    text-indent: -999px;
    cursor: pointer;
    background: #fff;
    display: inline-block;
    border: 1px solid #4dd3c5
}

.indcase .cont .hd ul li.on {
    background: #4dd3c5;
}

.indcase .cont .bd {
    overflow: hidden;
}

.indcase .cont .bd ul {
    overflow: hidden;
    zoom: 1;
    margin: 0 -33px !important;
}

.indcase .cont .bd ul li {
    margin: 0 33px;
    float: left;
    _display: inline;
    padding: 15px 0;
    width: 355px;
}

.indcase .cont .bd ul li em {
    display: block;
    width: 355px;
    height: 210px;
    overflow: hidden;
    background: #000;
    position: relative;
}

.indcase .cont .bd ul li em img {
    width: 355px;
    height: 210px;
    display: block;
    opacity: 1;
    -webkit-transition: all .6s;
    transition: all .6s;
}

.indcase .cont .bd ul li em b {
    display: block;
    width: 32px;
    height: 32px;
    background: url(/static/images/bfico.png) no-repeat center;
    left: 50%;
    top: 50%;
    margin-top: -16px;
    margin-left: -16px;
    z-index: 999;
    position: absolute;
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.indcase .cont .bd ul li a {
    display: block;
    background: #fff;
    top: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 1px solid #e4ecf3;
    border-radius: 5px;
    position: relative;
}

.indcase .cont .bd ul li a:hover em img {
    opacity: .7;
}

.indcase .cont .bd ul li a:hover {
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.indcase .cont .bd ul li a:hover em b {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.indcase .cont .bd ul li span {
    display: block;
    padding: 10px 15px;
    background: #fff;
    line-height: 35px;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    overflow: hidden
}

.indcase .cont .bd ul li span i {
    display: block;
    float: left;
    width: 235px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.indcase .cont .bd ul li span ins {
    display: block;
    float: right;
    color: #999;
}

.cyfooter {
    width: 100%;
    background: #141414;
    overflow: hidden
}

.cyfooter ul {
    overflow: hidden;
    width: 1080px;
    margin: 80px auto 50px;
}

.cyfooter li {
    float: left;
    padding-right: 70px
}

.cyfooter li:last-child {
    padding-right: 0
}

.cyfooter li:last-child a {
    height: 60px
}

.cyfooter li label {
    display: block;
    color: #d3d3d3;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 10px
}

.cyfooter li a {
    display: block;
    color: #828282;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    overflow: hidden
}

.cyfooter li em {
    float: left
}

.cyfooter li em img {
    display: block;
    margin: 10px 0 6px
}

.cyfooter li p {
    color: #828282;
    font-size: 14px;
    line-height: 25px;
    overflow: hidden;
    margin-bottom: 10px
}

.cyfooter li i.footer_ico1 {
    float: left;
    width: 30px;
    height: 40px;
    background: url(/static/images/help/cyfooter_ico1.png) no-repeat center left
}

.cyfooter li i.footer_ico2 {
    float: left;
    width: 30px;
    height: 40px;
    background: url(/static/images/help/cyfooter_ico2.png) no-repeat center left
}

.cyfooter li i.footer_ico3 {
    float: left;
    width: 30px;
    height: 40px;
    background: url(/static/images/help/cyfooter_ico3.png) no-repeat center left
}

.cyfooter li i.footer_ico4 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(/static/images/help/cyfooter_ico4.png) no-repeat center left
}

.cyfooter li i.footer_ico5 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(/static/images/help/cyfooter_ico5.png) no-repeat center left
}

.cyfooter li i.footer_ico6 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(/static/images/cyfooter_ico6.png) no-repeat center left
}

.cyfooter li i.footer_ico7 {
    float: left;
    width: 50px;
    height: 50px;
    background: url(/static/images/cyfooter_ico7.png) no-repeat center left
}

.cyfooter li p ins {
    line-height: 50px;
    display: block;
    float: left
}

.cyfooter .friendlink {
    text-align: center;
    margin-bottom: 80px
}

.cyfooter .friendlink p {
    color: #828282;
    font-size: 14px;
    margin-bottom: 10px
}

.cyfooter .friendlink a {
    display: inline-block;
    height: 16px;
    line-height: 16px;
    color: #828282;
    font-size: 14px;
    border-right: 1px solid #828282;
    padding: 0 10px
}

.cyfooter .friendlink a:last-child {
    border: 0;
    padding-right: 0
}

/*
.copyright {
    padding: 30px;
    background: #080909;
    color: #828282;
    text-align: center;
    font-size: 13px
}
*/

.guide {
    width: 100%;
    height: 900px;
    background: url(/static/images/help/guide_bg.jpg) no-repeat center bottom;
    background-size: 100% 100%;
    overflow: hidden
}

.guide .guidetitle {
    height: 60px;
    line-height: 50px;
    margin: 80px auto 70px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #333;
    background: url(/static/images/help/guide_title.png) no-repeat center;
    background-size: contain
}

.guide .slide li {
    overflow: hidden
}

.guide .slide li .leftpart {
    float: left;
    width: 700px;
    height: 500px
}

.guide .slide li .rightpart {
    float: left;
    width: 450px;
    margin-left: 50px;
    margin-top: 120px
}

.guide .slide li .rightpart h1 {
    overflow: hidden
}

.guide .slide li .rightpart h1 em {
    float: left;
    width: 55px;
    font-size: 30px;
    color: #0d7bf8;
    height: 30px;
    line-height: 30px
}

.guide .slide li .rightpart h1 span {
    float: left;
    font-size: 18px;
    color: #333;
    height: 30px;
    line-height: 30px
}

.guide .slide li .rightpart p {
    font-size: 16px;
    color: #999;
    margin-top: 30px;
    line-height: 25px
}

.guide .slide li .overtext {
    width: 930px;
    height: 480px;
    margin: 10px auto;
    box-shadow: 0 0 30px -5px rgba(0, 0, 0, .1);
    overflow: hidden
}

.guide .slide li .overtext h1 {
    height: 25px;
    line-height: 25px;
    width: 160px;
    padding-left: 30px;
    background: url(/static/images/help/guide_ico1.png) no-repeat center left;
    background-size: contain;
    text-align: center;
    margin: 65px auto 55px;
    font-size: 18px;
    color: #4dd3c5;
    font-weight: 400
}

.guide .slide li .overtext p {
    line-height: 35px;
    text-align: center;
    font-size: 15px;
    color: #696969
}

.guide .slide li .overtext p a {
    color: #4dd3c5
}

.guide .slide li .overtext .btn {
    display: block;
    width: 160px;
    height: 45px;
    line-height: 45px;
    margin: 60px auto 0;
    font-size: 15px;
    color: #fff;
    background: #4dd3c5;
    text-align: center;
    border-radius: 5px
}

.guide .slide li .overtext .videoguide {
    display: block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    margin: 0 auto;
    padding-left: 20px;
    font-size: 14px;
    color: #999;
    background: url(/static/images/help/guide_ico2.png) 23px center no-repeat;
    text-align: center
}

.guide .slide .nav {
    width: 100%;
    z-index: 10;
    height: 30px;
    line-height: 30px;
    text-align: center;
    margin-top: 120px
}

.guide .slide .nav ul li {
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 9px;
    overflow: hidden;
    border: 1px solid #c1c1c1;
    border-radius: 50%
}

.guide .slide .nav ul .on {
    border: 1px solid #4dd3c5;
    background: #4dd3c5
}

.guide .slide .prev {
    position: absolute;
    left: 0;
    top: 170px;
    display: block;
    width: 60px;
    height: 100px;
    background: url(/static/images/help/guide_leftarrow.png) no-repeat center #4dd3c5;
    cursor: pointer
}

.guide .slide .next {
    position: absolute;
    right: 0;
    top: 170px;
    display: block;
    width: 60px;
    height: 100px;
    background: url(/static/images/help/guide_rightarrow.png) no-repeat center #4dd3c5;
    cursor: pointer
}

.agreement .banner {
    width: 100%;
    height: 300px;
    min-width: 1200px
}

.agreement .banner img {
    display: block;
    width: 100%;
    height: 100%
}

.agreement .banner h1 {
    position: absolute;
    width: 300px;
    height: 50px;
    line-height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -25px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    z-index: 10
}

.agreement .detail {
    width: 100%;
    min-width: 1200px;
    padding: 50px 0;
    background: url(/static/images/help/agreement_bottom.jpg) no-repeat center bottom;
    background-size: contain;
    color: #555
}

.agreement .detail h1, .agreement .detail p {
    font-size: 13px;
    margin: 5px 0;
    line-height: 25px
}

.question .banner {
    width: 100%;
    height: 300px;
    min-width: 1200px
}

.question .banner img {
    display: block;
    width: 100%;
    height: 100%
}

.question .banner h1 {
    position: absolute;
    width: 300px;
    height: 50px;
    line-height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -25px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    z-index: 10
}

.question .detail {
    width: 100%;
    min-width: 1200px;
    padding: 40px 0 80px;
    background: url(/static/images/help/agreement_bottom.jpg) no-repeat center bottom;
    background-size: contain;
    color: #555
}

.question .detail h1, .question .detail p {
    font-size: 15px;
    margin: 5px 0;
    line-height: 25px
}

.question .detail h1 {
    margin-top: 40px
}

.report .banner {
    width: 100%;
    height: 300px;
    min-width: 1200px
}

.report .banner img {
    display: block;
    width: 100%;
    height: 100%
}

.report .banner h1 {
    position: absolute;
    width: 300px;
    height: 50px;
    line-height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -25px;
    font-size: 36px;
    text-align: center;
    color: #fff;
    z-index: 10
}

.report .detail {
    width: 100%;
    min-width: 1200px;
    padding: 40px 0 160px;
    background: url(/static/images/help/agreement_bottom.jpg) no-repeat center bottom;
    background-size: contain;
    color: #555
}

.report .detail li {
    overflow: hidden;
    width: 700px;
    margin: 50px auto
}

.report .detail li p {
    float: left;
    width: 137px;
    border-left: 3px solid #48d5cc;
    height: 16px;
    line-height: 16px;
    text-indent: 5px;
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px
}

.report .detail li a {
    float: left;
    width: 560px
}

.report .detail li a h1 {
    font-size: 18px;
    margin-bottom: 10px
}

.report .detail li a span {
    font-size: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 25px
}

/*关于我们*/
.aboutus .banner {
    width: 100%;
    height: 300px;
    min-width: 1200px;
}

.aboutus .banner img {
    display: block;
    width: 100%;
    height: 100%;
}

.aboutus .banner h1 {
    position: absolute;
    width: 300px;
    height: 50px;
    line-height: 50px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -25px;
    font-size: 36px;
    text-align: center;
    color: #fff;
    z-index: 10;
}

.aboutus .detail {
    width: 100%;
    min-width: 1200px;
    padding: 40px 0 160px;
    background: url(/static/images/help/agreement_bottom.jpg) no-repeat center bottom;
    background-size: contain;
    color: #555;
}

.aboutus .detail p {
    font-size: 16px;
    color: #828282;
    margin: 25px 0;
    text-indent: 30px;
    line-height: 25px
}

.aboutus .detail h1 {
    font-size: 16px;
    color: #828282;
    font-weight: bold
}

.aboutus .detail .content_item_icon {
    width: 1000px;
    margin: 60px auto 0;
}

.aboutus .detail .content_item_icon ul li {
    cursor: pointer;
    width: 184px;
    height: 230px;
    border: 0;
    text-align: center;
    float: left;
}

.aboutus .detail .content_item_icon .icon {
    width: 124px;
    height: 124px;
    margin: 30px auto;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.aboutus .detail .content_item_icon span {
    font-size: 16px;
}

.aboutus .detail .content_item_icon ul li:nth-child(1) .icon {
    background: url(/static/images/help/aboutico_hover1.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:nth-child(2) .icon {
    background: url(/static/images/help/aboutico_hover2.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:nth-child(3) .icon {
    background: url(/static/images/help/aboutico_hover3.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:nth-child(4) .icon {
    background: url(/static/images/help/aboutico_hover4.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:hover {
    color: #fff;
    background: #777;
}

.aboutus .detail .content_item_icon ul li:hover:nth-child(1) .icon {
    background: url(/static/images/help/aboutico1.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:hover:nth-child(2) .icon {
    background: url(/static/images/help/aboutico2.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:hover:nth-child(3) .icon {
    background: url(/static/images/help/aboutico3.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:hover:nth-child(4) .icon {
    background: url(/static/images/help/aboutico4.png) no-repeat center;
}

.aboutus .detail .content_item_icon ul li:not(:first-child) {
    margin-left: 88px;
}

.banners {
    height: 694px;
    overflow: hidden;
    background: url(/static/images/bannerbg.jpg) no-repeat top center;
    padding-top: 90px;
}

.banners .contm {
    position: relative;
}

.banners .element i {
    position: absolute;
    color: #fff;
}

.banners .element i.icon-tianchongyuan {
    top: -40px;
    left: 1230px;
    color: #d0fdf7;
    font-size: 21px;
    opacity: .5;
}

.banners .element i.icon-sanjiao {
    top: -58px;
    left: 878px;
    font-size: 20px;
    opacity: .6;
}

.banners .element i.icon-yuan {
    top: 10px;
    left: 44px;
    font-size: 20px;
    color: #fff;
    opacity: .6;
}

.banners .element i.icon-fangxing {
    top: 368px;
    left: 188px;
    font-size: 28px;
    color: #fff;
    opacity: .7;
}

.banners .element i.icon-tianchongyuan.sm {
    top: -77px;
    left: 1268px;
    font-size: 11px;
    opacity: .5;
}

.banners .element i.icon-sanjiao.sm {
    top: 210px;
    left: 1252px;
    font-size: 18px;
    color: #fff;
}

.banners .element i.icon-yuan.sm {
    top: 520px;
    left: 1314px;
    font-size: 20px;
    color: #fff;
}

.banners .element i.icon-yuanjiaofangxing.sm {
    top: 100px;
    left: 1463px;
    font-size: 22px;
    color: #fff;
}

.banners .element i.icon-tianchongyuan.big {
    top: 147px;
    left: -220px;
    font-size: 24px;
    opacity: .5;
    color: #fff;
}

.banners .element i.icon-sanjiao.big {
    top: 453px;
    left: -205px;
    font-size: 28px;
    opacity: .5;
    color: #fff;
}

.banners .element i.icon-sanjiao.mid {
    top: 208px;
    left: 450px;
    font-size: 22px;
    opacity: .5;
    color: #fff;
}

.bannercont {
    position: relative;
    z-index: 1;
}

.bannercont .word {
    width: 540px;
    padding-left: 10px;
    padding-top: 110px;
}

.bannercont .word h2 {
    display: block;
    font-size: 34px;
    color: #fff;
    font-weight: 500;
}

.bannercont .word span {
    display: block;
    font-size: 18px;
    color: #fff;
    padding: 26px 0;
}

.bannercont .word a {
    display: block;
    width: 120px;
    text-align: center;
    height: 38px;
    line-height: 38px;
    background: #fff;
    border-radius: 38px;
    color: #1fd3cd;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(31, 200, 194, .32);
}

.bannercont .word a:hover {
    background: #fff;
}

.bannercont .word em {
    display: block;
    padding-top: 35px;
    margin-left: -20px;
}

.bannercont .word em img {
    display: block;
    float: left;
    margin-right: 20px;
}

.bannercont .video {
    width: 654px;
    height: 415px;
    background: #f7fafc;
    border-radius: 6px;
    padding: 16px 16px 0;
    margin-top: px;
}

.bannercont .video ul {
    overflow: hidden;
    padding-bottom: 16px;
}

.bannercont .video ul li {
    float: left;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 10px;
}

.bannercont .video ul li:nth-child(1) {
    background: #fc615d;
}

.bannercont .video ul li:nth-child(2) {
    background: #fec242;
}

.bannercont .video ul li:nth-child(3) {
    background: #35c94a;
}

.bannercont .video .mains {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
}

.bannercont .video video {
    display: block;
    width: 100%;
    position: relative;
    z-index: 1;
}

.indpart2 {
    background: #f5f9fb;
    min-height: 1000px;
    overflow: hidden;
}

.indpart2 .wrap {
    position: relative;
    padding-bottom: 82px;
}

.indpart2 .circle {
    position: absolute;
    top: -170px;
    left: 1366px;
    width: 195px;
    height: 342px;
    background: url(/static/images/scirtl.png) no-repeat center;
    z-index: 999;
}

.indpart2 .zprt {
    padding: 82px 65px 0;
    position: relative;
}

.indpart2 .zprt .element i {
    color: #1fd3cd;
    position: absolute;
}

.indpart2 .zprt .element i.icon-yuan {
    top: 410px;
    left: -118px;
    font-size: 28px;
}

.indpart2 .zprt .element i.icon-xuanzedian {
    top: 520px;
    right: -16px;
    font-size: 18px;
}

.indpart2 .pic {
    border-radius: 6px;
    overflow: hidden;
    width: 604px;
    box-shadow: 3px 3px 40px rgba(67, 209, 193, .16);
    background: url(/static/images/casezspic1.jpg) no-repeat center;
    height: 383px;
    padding: 46px 14px 0;
}

.indpart2 .pic img {
    display: block;
    width: 100%;
}

.indpart2 .pic .video {
    width: 575px;
    border-radius: 4px;
    overflow: hidden;
}

.indpart2 .pic video {
    width: 100%;
    display: block;
}

.indpart2 .word {
    width: 410px;
    padding-top: 80px;
}

.indpart2 .word p i {
    font-size: 45px;
    color: #1fd3cd;
    vertical-align: top;
}

.indpart2 .word p i.icon-tihuanyinle {
    font-size: 70px;
    margin-bottom: -10px;
}

.indpart2 .word p span {
    display: inline-block;
    margin-left: 20px;
    font-size: 30px;
    line-height: 45px;
    vertical-align: top;
}

.indpart2 .word p span.music {
    line-height: 70px;
}

.indpart2 .word h2 {
    display: block;
    padding-top: 20px;
    color: #010101;
    font-size: 24px;
}

.indpart2 .word em {
    display: block;
    font-size: 14px;
    padding-top: 15px;
    color: #666666;
}

.indpart2 .word a {
    display: block;
    width: 120px;
    height: 38px;
    line-height: 38px;
    background: #1fd3cd;
    border-radius: 38px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, .12);
    margin-top: 30px;
}

.indpart2 .word a:hover {
    background: #21e5de;
}

.indpart3 {
    padding: 120px 0 90px;
    background: #fff url(/static/images/indpertvbg.png) no-repeat center 45px;
}

.indpart3 .title {
    text-align: center;
}

.indpart3 .title h2 {
    display: block;
    font-size: 32px;
    color: #010101;
}

.indpart3 .title i {
    display: block;
    font-size: 16px;
    color: #666;
    padding-top: 12px;
}

.indpart3 .pics {
    position: relative;
    height: 460px;
}

.indpart3 .pics img {
    display: block;
    position: absolute;
    border-radius: 3px;
    transform-origin: 50% -50%;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    -webkit-animation-name: breathe;
    animation-name: breathe
}

.indpart3 .pics img.img1 {
    left: 303px;
    top: 90px;
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
}

.indpart3 .pics img.img2 {
    left: 511px;
    top: 98px;
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
}

.indpart3 .pics img.img3 {
    left: 671px;
    top: 50px;
    z-index: 99;
    -webkit-animation-duration: 3.8s;
    animation-duration: 3.8s;
}

.indpart3 .pics img.img4 {
    left: 990px;
    top: 87px;
    -webkit-animation-duration: 3.8s;
    animation-duration: 3.8s;
}

.indpart3 .pics img.img5 {
    left: 828px;
    top: 153px;
    -webkit-animation-duration: 3.4s;
    animation-duration: 3.4s;
}

.indpart3 .pics img.img6 {
    left: 1019px;
    top: 263px;
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
}

.indpart3 .pics img.img7 {
    left: 1109px;
    top: 195px;
    -webkit-animation-duration: 3.4s;
    animation-duration: 3.4s;
}

.indpart3 .pics img.img8 {
    right: 270px;
    top: 333px;
    -webkit-animation-duration: 3.8s;
    animation-duration: 3.8s;
}

.indpart3 .pics img.img9 {
    left: 626px;
    top: 211px;
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
}

.indpart3 .pics img.img10 {
    left: 520px;
    top: 153px;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

.indpart3 .pics img.img11 {
    left: 370px;
    top: 210px;
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
}

.indpart3 .pics img.img12 {
    left: 242px;
    top: 154px;
    -webkit-animation-duration: 3.8s;
    animation-duration: 3.8s;
}

.indpart3 .pics img.img13 {
    left: 106px;
    top: 150px;
    -webkit-animation-duration: 3.3s;
    animation-duration: 3.3s;
}

.indpart3 .pics img.img14 {
    left: 53px;
    top: 250px;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

.indpart3 .pics img.img15 {
    left: 126px;
    top: 306px;
    -webkit-animation-duration: 3.8s;
    animation-duration: 3.8s;
}

.indpart3 .pics img.img16 {
    left: 286px;
    top: 358px;
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
}

.indpart3 .btn {
    text-align: center;
    padding-top: 60px;
}

.indpart3 .btn a {
    display: block;
    width: 160px;
    height: 38px;
    line-height: 38px;
    background: #1fd3cd;
    border-radius: 38px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    box-shadow: 2px 2px 16px rgba(0, 0, 0, .12);
    margin: 0 auto;
}

.indpart3 .btn a:hover {
    background: #21e5de;
}

.zmpt .word {
    padding-top: 120px;
    width: 530px
}

.zmpt .word.fr {
    text-align: right
}

.zmpt .word span {
    display: block
}

.zmpt .word b {
    display: inline-block;
    font-size: 24px;
    color: #333;
    font-weight: 700;
    padding-left: 84px;
    line-height: 30px
}

.zmpt .word p {
    display: block;
    color: #696969;
    padding-top: 26px;
    font-size: 18px
}

.zmpt img {
    display: block;
    margin: 0 auto
}

/*列表*/
.smbaner {
    height: 200px;
    min-width: 1200px;
    padding-top: 43px;
    text-align: center;
    text-shadow: 0 0 6px #333;
    color: #fff;
}

.smbaner .searchpart {
    width: 480px;
    top: 50%;
    left: 50%;
    margin-left: -240px;
    margin-top: -70px;
    color: #fff;
}

.smbaner .searchpart .searchinput {
    width: 100%;
    height: 42px;
    line-height: 42px;
    border: 1px solid #fff;
    border-radius: 21px;
    margin: 30px auto 15px;
}

.smbaner .searchpart .searchinput input {
    float: left;
    width: 380px;
    height: 40px;
    line-height: 40px;
    margin: 0 0 0 30px;
    border: 0;
    background: none;
    color: #fff;
}

.smbaner .searchpart .searchinput input::-webkit-input-placeholder {
    color: #fff;
}

.smbaner .searchpart .searchinput input::-moz-placeholder {
    color: #fff;
}

.smbaner .searchpart .searchinput input:-moz-placeholder {
    color: #fff;
}

.smbaner .searchpart .searchinput input:-ms-input-placeholder {
    color: #fff;
}

.smbaner .searchpart .searchinput a {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 0 0 20px;
    background: url(/static/images/searchicon2.png) no-repeat center;
}

.smbaner .searchpart .hotwords {
    display: block;
    width: 440px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
}

.smbaner .searchpart .hotwords span {
    float: left;
    height: 30px;
    line-height: 30px;
}

.smbaner .searchpart .hotwords .wordsgroup {
    width: 370px;
}

.smbaner .searchpart .hotwords .wordsgroup a {
    float: left;;
    height: 30px;
    color: #fff;
    margin: 0 8px;
}

.ulhcont {
    background: #fff;
    padding: 32px 0;
    text-align: center;
}

.ulhcont li {
    display: inline-block;
    margin: 0 15px;
    border-radius: 6px;
    background: #000;
    overflow: hidden;
    width: 160px;
    height: 90px;
    line-height: 90px;
    position: relative;
}

.ulhcont li i {
    display: block;
    width: 160px;
    height: 90px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 90px;
    font-weight: bold;
    color: #fff;
    font-size: 15px;
}

.ulhcont ul li a {
    display: block;
}

.ulhcont li img {
    display: block;
    opacity: 0.8;
}

.ulhcont li a:hover img {
    opacity: 0.6;
}

.caselist {
    background: #eff3f5;
    padding: 30px 0 45px;
    min-width: 1200px;
    overflow: hidden;
}

.caselist ul.listm {
    width: 1160px;
    margin: 0 auto;
}

.caselist ul.listm li {
    margin: 0 15px 30px;
    float: left;
    _display: inline;
}

.caselist ul.listm li em {
    display: block;
    width: 260px;
    height: 146px;
    overflow: hidden;
    background: #000;
    position: relative;
}

.caselist ul.listm li em img {
    width: 260px;
    height: 146px;
    display: block;
    opacity: 1;
    -webkit-transition: all .6s;
    transition: all .6s;
}

.caselist ul.listm li em b {
    display: block;
    width: 32px;
    height: 32px;
    background: url(/static/images/bfico.png) no-repeat center;
    left: 50%;
    top: 50%;
    margin-top: -16px;
    margin-left: -16px;
    z-index: 999;
    position: absolute;
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
}

.caselist ul.listm li a {
    display: block;
    width: 260px;
    background: #fff;
    top: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 1px solid #e4ecf3;
    border-radius: 5px;
    position: relative;
}

.caselist ul.listm li a:hover em img {
    opacity: .7;
}

.caselist ul.listm li a:hover {
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.caselist ul.listm li a:hover em b {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.caselist ul.listm li span {
    display: block;
    padding: 10px 15px;
    background: #fff;
    line-height: 35px;
    font-size: 14px;
    color: #333;
    font-weight: normal;
    overflow: hidden;
    width: 260px;
}

.caselist ul.listm li span i {
    display: block;
    float: left;
    width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.caselist ul.listm li span ins {
    display: block;
    float: right;
    color: #999;
}

.caselist ul.listm li span button {
    display: none;
    cursor: pointer;
    width: 110px; /*height: 35px;*/
    line-height: 35px;
    background-color: #4ad4c4;
    border: none;
    border-radius: 3px;
    color: #FFFFFF;
    margin: 0 auto;
}

.caselist ul.listm li span button:hover {
    background-color: #1abc9c;
}

.caselist ul.listm li a:hover span i, .caselist ul.listm li a:hover span ins {
    display: none;
}

.caselist ul.listm li a:hover span button {
    display: block;
}

.caselist .btn {
    padding: 20px 0 10px;
}

.caselist .btn a {
    display: block;
    width: 150px;
    height: 40px;
    background: #4dd3c5;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    line-height: 40px;
    margin: 0 auto;
}

.caselist .btn a:hover {
    background-color: #44bdb1;
}

.pagination {
    text-align: center;
    padding: 20px 0 80px;
}

.pagination a, .pagination span {
    display: block;
    padding: 0 12px;
}

/*.pagination li {
    display: inline-block;
    height: 34px;
    line-height: 32px;
    margin: 0 5px;
    color: #666;
    border-radius: 3px;
    border: 1px solid #eee;
    background: #fff;
}*/
.list-clu{
    width: 25%;
    float: left;
}
/*.pagination li.active span {
    color: #fff;
    background: #4dd3c5;
    border-color: #4dd3c5;
    border-radius: 2px;
}*/

/*.pagination li.on, .pagination li:hover {
    background: #4dd3c5;
    border-color: #4dd3c5;
    color: #fff;
}*/

/*.pagination li.on a, .pagination li:hover a {
    color: #fff;
}*/

/*视频编辑器*/
.editheader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #2d2d2d;
    height: 60px;
    z-index: 66;
}

.editheader .logo {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
    padding: 18px 32px 0;
}

.editheader .logo img {
    display: block;
    margin: auto;
}

.editheader .gobacks {
    position: absolute;
    top: 0;
    left: 190px;
    height: 60px;
    height: 30px;
    line-height: 30px;
    padding: 15px 0;
}

.editheader .gobacks a {
    color: #d5d5d5;
    font-size: 15px;
}

.editheader .gobacks a:hover {
    color: #fff;
}

.editheader .btns {
    height: 60px;
    position: absolute;
    top: 0px;
    right: 60px;
    padding: 16px 0px 0;
}

.editheader .btns a {
    display: block;
    padding: 0 20px;
    color: #fff;
    border-radius: 14px;
    height: 28px;
    margin-left: 10px;
    line-height: 26px;
    border: 1px solid #9a9a9a;
    font-size: 15px;
    float: left;
}

.editheader .btns a:hover {
    background: #616161;
    border-color: #616161;
}

.editheader ul {
    width: 260px;
    margin: 0 auto;
    height: 60px;
    line-height: 60px;
    text-align: center;
    color: #fff;
    font-size: 15px;
}

.editheader ul li {
    width: 50%;
    float: left;
}

.editheader ul li a {
    display: block;
    color: #fff;
}

.editheader ul li a.on {
    background: #414141;
    color: #4dd3c5;
}

.editheader ul li i {
    margin-right: 8px;
    vertical-align: middle;
}

.editmain {
    padding-top: 60px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
    font-weight: normal;
}

.editmain .leftcont {
    background: #fff;
    position: fixed;
    top: 60px;
    left: 0;
    width: 340px;
    bottom: 0;
    padding: 290px 20px 10px;
    box-shadow: 0 0 12px #ccc;
}

.editmain .preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 20px;
}

.editmain .preview h2 {
    display: block;
    height: 45px; /*max-width: 130px;*/
    line-height: 40px;
    padding-top: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #696969;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editmain .videopic {
    position: relative;
    width: 100%;
    background: #000;
}

.editmain .videopic .pic img {
    display: block;
    width: 100%;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}

.editmain .videopic .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
    color: #fff;
    font-size: 3em;
    opacity: 0;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    cursor: pointer;
}

.editmain .videopic .overlay i {
    opacity: 0.8;
}

.editmain .videopic:hover .overlay {
    opacity: 1;
}

.editmain .videopic:hover .pic img {
    opacity: 0.6;
}

.editmain .scmuncont {
    line-height: 40px;
    font-size: 14px;
    color: #696969;
    overflow: hidden;
    padding-top: 5px;
}

.editmain .scmuncont em {
    display: block;
    float: left;
}

.editmain .scmuncont i {
    display: block;
    float: left;
    margin-left: 18px;
}

.editmain .scmuncont .spc {
    background: url(/static/images/pic.png) no-repeat left center;
    padding-left: 22px;
}

.editmain .scmuncont .wrd {
    background: url(/static/images/word.png) no-repeat left center;
    padding-left: 20px;
}

.editmain .scmuncont ins {
    display: block;
    float: right;
    padding-left: 20px;
    background: url(/static/images/quanico.png) no-repeat left center;
    cursor: pointer;
}

.editmain .scmuncont ins.on {
    background: url(/static/images/quanicos.png) no-repeat left center
}

.editmain .jdtcont {
    overflow: hidden;
    height: 20px;
    line-height: 20px;
    color: #696969;
}

.editmain .jdtcont b {
    display: block;
    float: left;
}

.editmain .jdtcont .bar {
    width: 200px;
    margin-left: 18px;
    float: left;
    height: 20px;
    position: relative;
    padding-top: 6px;
}

.editmain .jdtcont .bar .tiao {
    height: 8px;
    background: #ececec;
    border-radius: 4px;
}

.editmain .jdtcont .bar .ysb {
    height: 8px;
    background: #a0a0a0;
    border-radius: 4px;
    position: absolute;
    top: 6px;
    left: 0;
    width: 66%;
}

.editmain .jdtcont .bar .ysb i {
    display: block;
    position: absolute;
    height: 18px;
    width: 18px;
    border: 4px solid #4addc1;
    right: 0;
    top: 50%;
    margin-top: -9px;
    background: #fff;
    border-radius: 50%;
}

.editmain .jdtcont span {
    display: block;
    float: right;
}

.editmain .jdtcont span i {
    color: #000;
}

.editmain .piclistcont {
    height: 100%;
    background: #ececec;
    padding: 12px 8px 12px 20px;
}

.editmain .piclistcont ul {
    overflow: auto;
    height: 100%;
    padding-right: 10px;
}

.editmain .piclistcont ul li {
    position: relative;
    margin-bottom: 10px;
    background: #000;
}

.editmain .piclistcont ul li:last-child {
    margin: 0;
}

.editmain .piclistcont ul li img {
    display: block;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    width: 100%;
    opacity: 0.8;
    cursor: pointer;
}

.editmain .piclistcont ul li i /*, .cur-scene-thumb i*/
{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 42px;
    padding: 5px 0 0 5px;
    width: 42px;
    color: #fff;
    background: url(/static/images/yst.png) no-repeat center;
}

.editmain .piclistcont ul li.on {
    border: 2px solid #4dd3c5;
}

.editmain .piclistcont ul li.on i /*, .cur-scene-thumb i*/
{
    background: url(/static/images/ystd.png) no-repeat center;
}

.editmain .piclistcont ul li.on img {
    opacity: 1;
}

.editmain .maincont {
    background: #fff;
    box-shadow: 0 0 12px #ccc;
    margin-left: 355px;
    margin-right: 75px;
    height: 100%;
    padding: 20px 0;
    min-width: 208px;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.editmain .pslitcont {
    padding: 0 28px;
    height: 100%;
    overflow: auto;
}

.editmain .pslitcont .zprt {
    border-bottom: 1px solid #ececec;
    padding: 10px 0 20px;
    margin-bottom: 10px;
}

.editmain .pslitcont .zprt.on {
    background: #f0fffd;
    padding: 20px 20px 20px;
    margin-top: -10px
}

.editmain .pslitcont .smtles {
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    font-size: 15px;
    color: #696969;
}

.editmain .pslitcont .contms {
    margin-top: 10px;
}

.editmain .pslitcont .contms .sprt {
    float: left;
    width: 150px;
    height: 100px;
    cursor: pointer;
    overflow: hidden;
    background: #e6e6e6;
    margin: 5px 20px 5px 0;
    position: relative;
    border: solid 2px transparent;
    overflow: hidden;
}

.editmain .pslitcont .contms .sprt.on {
    border: solid 2px #4DD3C5;
}

/*.cur-scene-thumb{position: fixed; top: 356px; left: 38px; z-index: 100; border: 2px solid #4dd3c5;height: 148px;}*//**可以放置状态标记 */
.editmain .pslitcont .contms .sprt.droppable {
    border: dashed 2px #4DD3C5 !important;
}

.editmain .pslitcont .contms .sprt.hover {
    border: solid 2px #cccccc;
}

.editmain .pslitcont .contms .sprt .words {
    line-height: 100px;
    text-align: center;
    color: #696969;
    font-size: 14px;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.editmain .pslitcont .contms .sprt .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(77, 211, 197, 0.8);
    opacity: 0;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.editmain .pslitcont .contms .sprt .overlay i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    overflow: hidden;
    text-align: center;
    line-height: 40px;
    color: #4dd3c5;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
}

.editmain .pslitcont .contms .sprt:hover .overlay {
    opacity: 1;
}

.editmain .pslitcont .contms .sprt:hover .overlay i {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(0);
    opacity: 1;
}

.editmain .rightcont {
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
}

.editmain .rightcont .contms {
    width: 300px;
    background: #fff;
    height: 100%;
    position: absolute;
    top: 0;
    right: -240px;
    z-index: 66;
    box-shadow: 0 0 12px #ccc;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.editmain .rightcont .contms h2 {
    display: block;
    height: 41px;
    line-height: 40px;
    border-bottom: 1px solid #f3f3f3;
    text-align: center;
    color: #696969;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 9999;
}

.editmain .rightcont .smtitls ul {
    height: 41px;
    line-height: 40px;
    border-bottom: 1px solid #f3f3f3;
    text-align: center;
    color: #696969;
    font-size: 14px;
}

.editmain .rightcont .smtitls ul li {
    width: 50%;
    float: left;
    position: relative;
}

.editmain .rightcont .smtitls ul li a {
    display: block;
    color: #333;
}

.editmain .rightcont .smtitls ul li a:after {
    display: block;
    content: "";
    width: 0;
    height: 2px;
    position: absolute;
    background: #49ceb5;
    bottom: 0;
    left: 50%;
    right: 50%;
}

.editmain .rightcont .smtitls ul li a:hover:after, .editmain .rightcont .contms ul li.on a:after {
    width: 30px;
    margin-left: -15px;
    margin-right: -15px;
}

.editmain .rightcont .smtitls ul li a:hover, .editmain .rightcont .contms ul li.on a {
    color: #49ceb5;
}

.editmain .rightcont .contms .cmt {
    padding: 0px 8px 0 13px;
    overflow: auto;
    margin: 10px 1px 0px 0;
    position: absolute;
    top: 40px;
    left: 0;
    bottom: 70px;
    right: 0;
}

.editmain .rightcont .contms .cmt .zprt {
    width: 120px;
    height: 80px;
    cursor: pointer;
    float: left;
    margin: 5px;
    overflow: hidden;
    background: #e6e6e6;
    position: relative;
}

.editmain .rightcont .contms .cmt .zprt.on {
    border: solid 2px #4DD3C5;
}

.editmain .rightcont .contms .cmt .zprt.droppable {
    border: dashed 2px #4DD3C5;
}

.editmain .rightcont .contms .cmt .zprt img {
    display: block;
    width: 120px;
    height: 80px;
    opacity: 1;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.editmain .rightcont .contms .cmt .zprt i {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 28px;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    overflow: hidden;
    text-align: right;
    line-height: 15px;
    opacity: 0;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    background: url(/static/images/zst.png) no-repeat center;
}

.editmain .rightcont .contms .cmt .zprt:hover i {
    opacity: 1;
}

.editmain .rightcont .contms .cmt .zprt:hover img {
    opacity: 0.8;
}

.editmain .rightcont .contms .cmt .zprt .scbar {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 10px 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f1f1f1; /*display: ;*/
    z-index: 666;
    opacity: 0.7
}

.editmain .rightcont .contms .cmt .zprt .scbar span {
    font-size: 13px;
    color: #696969;
    display: block;
    padding: 5px 0 8px;
}

.editmain .rightcont .contms .cmt .zprt .scbar ins {
    display: block;
    width: 100%;
    height: 6px;
    background: #fff;
}

.editmain .rightcont .contms .cmt .zprt .scbar ins em {
    display: block;
    width: 0;
    height: 6px;
    background: #4dd3c5;
}

.editmain .rightcont .contms .cmt .zprt .scbar b {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    color: #cccccc;
    line-height: 30px;
    font-size: 20px;
    margin: 0 auto;
}

.editmain .rightcont .contms .cmt .materials-tips {
    text-align: center;
    color: #9c9c9c;
    margin-top: 20px;
}

.pender-progress {
    text-align: center;
    padding-top: 10px;
    line-height: 36px;
    color: #4cd3c5;
    font-size: 14px;
}

.pender-progress i {
    display: inline-block;
    width: 26px;
    height: 26px;
    background: url(../../images/new/shalou.png) no-repeat center;
    animation: timerRotate 1s infinite ease;
    -webkit-animation: timerRotate 1s infinite ease;
    -moz-animation: timerRotate 1s infinite ease;
    -ms-animation: timerRotate 1s infinite ease;
    vertical-align: middle;
}

.pender-progress em {
    padding: 0 10px;
}

.pender-progress span {
    display: inline-block;
    height: 8px;
    width: 125px;
    border-radius: 4px;
    background: #fff;
    vertical-align: middle;
    text-align: left;
    overflow: hidden
}

.pender-progress span ins {
    display: inline-block;
    width: 0%;
    background: #4cd3c5;
    height: 8px;
    vertical-align: top;
}

.pender-progress b {
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
}

/*沙漏动画*/
@-webkit-keyframes timerRotate {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-180deg);
    }
}

@-moz-keyframes timerRotate {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-180deg);
    }
}

@-ms-keyframes timerRotate {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-180deg);
    }
}

@keyframes timerRotate {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-180deg);
    }
}

.editmain .rightcont .titlems {
    width: 60px;
    height: 100%;
    background: #efefef;
    position: relative;
    z-index: 666;
}

.editmain .rightcont .titlems li {
    cursor: pointer;
    height: 62px;
    text-align: center;
    font-size: 14px;
    color: #a1a7ae;
    padding: 10px 3px;
}

.editmain .rightcont .titlems li i {
    font-size: 20px;
    display: block;
}

.editmain .rightcont .titlems li em {
    display: block;
    padding-top: 5px;
}

.editmain .rightcont .titlems li.on, .editmain .rightcont .titlems li:hover {
    color: #4dd3c5;
    padding: 10px 0 10px 3px;
    border-right: 3px solid #4dd3c5;
    background: #e6e6e6;
}

.editmain .rightcont .btns {
    margin: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 20px;
    overflow: hidden;
    height: 40PX;
    z-index: 9999;
}

.editmain .rightcont .btns a {
    display: block;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    background: #4dd3c5;
    text-align: center;
    color: #fff;
    font-size: 14px;
}

.editmain .rightcont .btns a.wmxuploadbtn {
    position: relative;
    background: #eee;
    overflow: hidden;
    height: 40px;
    width: 100%;
    display: block;
    border-radius: 20px;
}

.editmain .rightcont .btns a.wmxuploadbtn i {
    display: block;
    height: 40px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6666;
}

.editmain .rightcont .btns a.wmxuploadbtn .music-progress-bar {
    display: block;
    content: "";
    height: 40px;
    width: 0; /*position: ;*/
    top: 0;
    left: 0;
    background: #4dd3c5;
}

.smallconts {
    width: 720px;
    height: 500px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -190px;
    margin-top: -250px;
    background: #fff;
    z-index: 99999;
}

.smallconts.on {
    margin-left: -365px;
}

.smallconts .wmstile {
    height: 56px;
    line-height: 55px;
    border-bottom: 1px solid #f3f3f3;
    color: #696969;
    font-size: 15px;
    overflow: hidden;
    padding: 0 20px;
}

.smallconts .wmstile li {
    float: left;
    margin-right: 50px;
    position: relative;
    cursor: pointer;
}

.smallconts .wmstile li i {
    display: block;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-align: center;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: 10px;
    right: -24px;
    background: #4dd3c5;
}

.smallconts .wmstile li.on {
    color: #4dd3c5;
    border-bottom: 2px solid #4dd3c5;
    line-height: 53px;
}

.smallconts .wmstile ul {
    padding-left: 10px;
}

.smallconts .wmstile ins {
    display: block;
    float: right;
    padding-left: 20px;
    background: url(/static/images/quanico.png) no-repeat left center;
    cursor: pointer;
}

.smallconts .wmstile ins.on {
    background: url(/static/images/quanicos.png) no-repeat left center
}

.smallconts .contms {
    padding: 10px 0;
    margin: 0 20px;
}

.smallconts .contms .sprt {
    float: left;
    width: 150px;
    height: 100px;
    overflow: hidden;
    background: #e6e6e6;
    margin: 10px;
    position: relative;
}

.smallconts .contms .sprt .pic {
    position: relative
}

.smallconts .contms .sprt .pic i {
    display: block;
    width: 16px;
    height: 16px;
    background: url(/static/images/tuicoa.png) no-repeat center;
    position: absolute;
    bottom: 5px;
    right: 5px
}

.smallconts .contms .sprt .words {
    line-height: 100px;
    text-align: center;
    color: #696969;
    font-size: 14px;
    padding: 0 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.smallconts .contms .sprt .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(77, 211, 197, 0.8);
    opacity: 0;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.smallconts .contms .sprt .overlay i {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    font-size: 20px;
    overflow: hidden;
    text-align: center;
    line-height: 40px;
    color: #4dd3c5;
    opacity: 0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
}

.smallconts .contms .sprt:hover .overlay {
    opacity: 1;
}

.smallconts .contms .sprt:hover .overlay i {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(0);
    opacity: 1;
}

.musicont {
    padding: 0 10px;
}

.musicont .dqzprt {
    border-bottom: 1px solid #f3f3f3;
    padding: 6px 0px 12px;
}

.musicont .dqzprt .title {
    padding-bottom: 10px;
    line-height: 22px;
    overflow: hidden;
}

.musicont .dqzprt .title ins {
    float: left;
    color: #696969;
    font-size: 14px;
}

.musicont .dqzprt .title a {
    float: right;
    color: #bcbcbc;
    padding: 0 10px;
}

.musicont .dqzprt .cont {
    background: #f3f3f3;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    color: #696969;
    position: relative;
}

.musicont .dqzprt .cont ins {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 45px;
    cursor: pointer;
    line-height: 45px;
    text-align: center;
}

.musicont .dqzprt .cont div em {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 45px;
    height: 45px;
    cursor: pointer;
    line-height: 45px;
    text-align: center;
}

.musicont .dqzprt .cont div a {
    display: block;
    width: 160px;
    color: #696969;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-left: 45px;
}

.musicont .listm {
    padding: 6px 0;
}

.musicont .listm li {
    height: 38px;
    line-height: 38px;
    overflow: hidden;
    padding-left: 4px;
}

.musicont .listm li a {
    display: block;
    color: #7a7a7a;
    font-size: 14px;
    padding-left: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 220px;
    float: left;
    background: url(/static/images/bfzt1.png) no-repeat left center;
}

.musicont .listm li a.private-music {
    width: 195px;
}

.musicont .listm li.on a {
    background: url(/static/images/bfzt2.png) no-repeat left center;
}

.musicont .listm li ins {
    float: left;
    color: #696969;
    display: block; /*position: absolute; top: 0; right: 0;*/
    width: 20px;
    height: 38px;
    cursor: pointer;
    line-height: 38px;
    text-align: center;
}

.musicont .listm li ins:hover, .musicont .dqzprt .cont ins:hover {
    color: #4DD3C5;
}

.musicont .listm li.on a.paused {
    background: url(/static/images/bfzt4.png) no-repeat left center;
}

.musicont .listm li:nth-child(2n-1) {
    background: #f4f6f6;
}

/*.musicont .listm li:hover{background: #f3f3f3;}*/
.musicont .listm .nullcont {
    background: url(/static/images/munllico.png) no-repeat center top;
    padding-top: 66px;
    text-align: center;
    font-size: 14px;
    color: #999999;
    margin-top: 106px;
}

.musicont .listm dl {
    overflow: hidden;
    text-align: center;
    color: #696969;
    font-size: 14px;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 6px;
    line-height: 40px;
    margin-bottom: 12px;
}

.musicont .listm dl dd {
    width: 25%;
    float: left;
}

.musicont .listm dl dd a {
    display: block;
    color: #696969;
}

.musicont .listm dl dd.on a {
    color: #49ceb5;
}

/*弹框*/
.vdtkmain {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -456px;
    margin-top: -265px;
    background: #fff;
    webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    width: 922px;
    height: 530px;
    z-index: 999;
}

.music-edit {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -375px;
    margin-top: -185px;
    background: #fff;
    webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    width: 750px;
    height: 170px;
    z-index: 999;
    border-radius: 6px;
    padding: 24px 45px;
}

.music-edit .closed {
    width: 45px;
    position: absolute;
    line-height: 45px;
    top: 0px;
    right: 0px;
    cursor: pointer;
    color: #ccc;
    font-size: 35px;
    overflow: hidden;
    text-align: center;
}

.music-edit .title {
    color: #696969;
    font-size: 15px;
}

.music-edit .mains {
    overflow: hidden;
    line-height: 40px;
    color: #696969;
    font-size: 14px;
    margin-top: 25px;
}

.music-edit .mains .btns {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    float: left;
    text-align: center;
    background: #4dd3c5;
    color: #fff;
    cursor: pointer;
    margin-right: 20px;
    border-radius: 50%;
}

.music-edit .mains .times {
    float: left;
}

.music-edit .mains .track-slider {
    float: left;
    margin: 14px 15px 0;
    height: 2px;
    background: #efefef;
    width: 520px;
}

.music-edit .mains .zmlet {
    position: relative;
    height: 2px;
    width: 150px;
    background: #4dd3c5;
    left: 30px;
}

.music-edit .mains .zmlet .dians {
    -webkit-transition: -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    transition: transform .2s ease-out;
    width: 12px;
    height: 12px;
    cursor: ew-resize;
    background: #4dd3c5;
    border-radius: 50%;
    position: absolute;
    top: -5px;
}

.music-edit .mains .zmlet .lefttime {
    position: absolute;
    left: -26px;
}

.music-edit .mains .zmlet .righttime {
    position: absolute;
    right: -26px;
}

.music-edit .mains .zmlet .mprogress {
    position: relative;
    height: 2px;
    background-color: #2e9e92;
    width: 0;
    z-index: 999;
}

.music-edit .mains .zmlet .leftdian {
    left: -12px;
}

.music-edit .mains .zmlet .rightdian {
    right: -12px;
}

.music-edit .mains .zmlet .dians:hover {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

.music-edit .sbtns span {
    display: block;
    padding-top: 20px;
    text-align: right;
    font-size: 15px;
}

.music-edit .sbtns span i {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    background: url(/static/images/quanico.png) no-repeat left center;
    cursor: pointer;
    margin-left: 40px;
}

.music-edit .sbtns span i.on {
    background: url(/static/images/quanicos.png) no-repeat left center;
}

.modal-add-img {
    background: #5f5f64;
}

.modal-add-img .picbg img {
    display: block;
    height: 530px;
    margin: 0 auto;
}

.modal-add-img .cont {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.modal-add-img .uploadbtn {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 45%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

.modal-add-img .uploadbtn .btns {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -35px;
    z-index: 9999;
    opacity: 0.8;
    cursor: pointer;
}

.modal-add-img ul.cmt {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 0;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    font-weight: bolder;
}

.modal-add-img ul.cmt li {
    width: 50%;
    float: left;
    text-align: center;
}

.arc {
    width: 70px;
    height: 70px;
    top: 50%;
    left: 50%;
    margin-left: -35px;
    margin-top: -35px;
    position: absolute;
    z-index: 999;
    border: 0px solid black;
    border-radius: 50px;
    background: #4cd3c5;
    transform: scale(0);
}

.animation1 {
    animation: arc 2s linear 0s infinite;
    -webkit-animation: arc 2s linear 0s infinite;
}

.animation2 {
    animation: arc 2s linear 1s infinite;
    -webkit-animation: arc 2s linear 1s infinite;
}

.animation3 {
    animation: arc 2s linear 2s infinite;
    -webkit-animation: arc 2s linear 2s infinite;
}

@keyframes arc {
    0% {
        transform: scale(1);
        opacity: .4;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@-webkit-keyframes arc {
    0% {
        -webkit-transform: scale(1);
        opacity: .4;
    }
    100% {
        -webkit-transform: scale(1.8);
        opacity: 0;
    }
}

.modal-edit-text {
    background: #5f5f64;
}

.modal-edit-text .picbg img {
    display: block;
    width: 100%;
    margin: 0 auto;
    height: 530px;
}

.modal-edit-text .cont {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 15px;
    padding: 25px 26px 25px 36px;
}

.modal-edit-text .cont .btns a {
    display: block;
    float: left;
    width: 66px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: #bec5c4;
    color: #fff;
    font-size: 14px;
    text-align: center;
}

.modal-edit-text .cont .btns a:first-child {
    background: #4cd3c5;
    margin-right: 12px;
}

.modal-edit-text .cont .textcont .webtxt {
    border: none;
    height: 30px;
    line-height: 29px;
    border-bottom: 1px solid #fff;
    padding: 0 10px;
    color: #fff;
    width: 500px;
    background: none;
}

.modal-edit-text .cont .textcont span {
    line-height: 30px;
    padding-left: 20px;
    font-size: 15px;
    color: #fff;
}

.webtxt::-webkit-input-placeholder {
    color: #fff;
    font-size: 14px;
}

.webtxt:-moz-placeholder {
    color: #fff;
    font-size: 14px;
}

.webtxt::-moz-placeholder {
    color: #fff;
    font-size: 14px;
}

.webtxt:-ms-input-placeholder {
    color: #fff;
    font-size: 14px;
}

/*.modal-edit-text .cont .textcont span i {color: #4cd3c5;}*/
.vdtkmain .prematerial {
    width: 50px;
    height: 50px;
    background: url(../../images/new/prematerial.png) no-repeat center;
    position: absolute;
    margin-top: -25px;
    top: 50%;
    left: -80px;
    cursor: pointer;
}

.vdtkmain .nextmaterial {
    width: 50px;
    height: 50px;
    background: url(../../images/new/nextmaterial.png) no-repeat center;
    position: absolute;
    margin-top: -25px;
    top: 50%;
    right: -80px;
    cursor: pointer;
}

a.btn-commit {
    position: absolute;
    right: 55px;
    bottom: 15px;
    display: block;
    width: 110px;
    height: 34px;
    line-height: 34px;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    background: #4cd3c5;
}

.vdtkmain .closed {
    width: 45px;
    position: absolute;
    line-height: 45px;
    top: -10px;
    right: -45px;
    cursor: pointer;
    color: #fff;
    font-size: 40px;
    overflow: hidden;
    text-align: center;
}

.vdtkmain .closed:hover {
    color: #4DD3C5;
}

.vdtkmain .conts {
    height: 100%;
    overflow: hidden;
}

.vdtkmain .leftfilter {
    width: 260px;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 16px #ddd;
    padding: 0 15px;
}

.vdtkmain .leftfilter h2 {
    display: block;
    border-bottom: 1px solid #eaeaea;
    height: 56px;
    line-height: 55px;
    color: #696969;
    font-size: 15px;
}

.vdtkmain .leftfilter ul {
    height: 420px;
    overflow: auto;
    margin: 15px -5px 0;
}

.vdtkmain .leftfilter ul li {
    float: left;
    width: 100px;
    margin: 5px;
    height: 120px;
    cursor: pointer;
    border: 1px solid #e6e6e6;
    text-align: center;
    background-color: #3C3C3C;
    color: #FFFFFF;
    font-size: 12px;
}

.vdtkmain .leftfilter ul li.on {
    border: 1px solid #4cd3c5;
    background-color: #4DD3C5;
}

.vdtkmain .leftfilter ul li span {
    width: 100%;
    height: 20px;
    line-height: 20px;
    display: block;
}

.vdtkmain .leftfilter ul li img {
    display: block; /*width: 100%; height: 100%; margin: 0 auto;*/
}

.vdtkmain .czmain {
    padding: 55px 55px 0;
    width: 660px;
}

.vdtkmain .czmain .content {
    width: 550px; /*background: #f60;*/
    height: 350px;
    overflow: hidden;
}

.vdtkmain .czmain .show {
    width: 550px;
    height: 350px;
    text-align: center;
}

.vdtkmain .czmain .cropper-bg {
    background: #ebeeed;
    border-radius: 5px
}

.vdtkmain .czmain .cropper-modal {
    opacity: 0.4;
}

.vdtkmain .czmain .cropper-view-box {
    outline: 1px solid #e2e2e2;
    outline-color: #e2e2e2;
}

.vdtkmain .czmain .cropper-line {
    background: #e2e2e2;
}

.vdtkmain .czmain .cropper-point {
    background: #fff;
}

.vdtkmain .czmain .btns {
    text-align: center;
    padding-top: 20px;
}

.vdtkmain .czmain .btns a {
    display: inline-block;
    margin: 0 15px;
    width: 66px;
    font-size: 14px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: #bec5c4;
}

.vdtkmain .czmain .btns a:hover {
    background: #4cd3c5;
}

/*滤镜*/
.filter_1 {
    position: relative;
    -webkit-filter: contrast(110%) brightness(110%) saturate(130%);
    filter: contrast(110%) brightness(110%) saturate(130%);
}

.filter_1:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    mix-blend-mode: screen;
    background: rgba(243, 106, 188, 0.3);
}

.filter_3 {
    -webkit-filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
    filter: contrast(110%) brightness(110%) sepia(30%) grayscale(100%);
}

.filter_3:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    background: rgba(0, 0, 0, 0);
}

.filter_2 {
    position: relative;
    -webkit-filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(20deg);
    filter: contrast(90%) brightness(120%) saturate(85%) hue-rotate(200deg)
}

.filter_2:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    mix-blend-mode: darken;
    background: -webkit-linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
    background: linear-gradient(to right, rgba(66, 10, 14, 0.2) 1, rgba(66, 10, 14, 0));
}

.filter_4 {
    position: relative;
    -webkit-filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
    filter: contrast(85%) brightness(110%) saturate(75%) sepia(22%);
}

.filter_4:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
    pointer-events: none;
    mix-blend-mode: soft-light;
    opacity: 0.5;
    background: rgba(173, 205, 239, 1);
}

.filter_5 {
    position: relative;
    -webkit-filter: brightness(110%) contrast(110%) saturate(130%);
    filter: brightness(110%) contrast(110%) saturate(130%);
}

.filter_5:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: screen;
    opacity: 1;
    background: rgba(243, 106, 188, 0.3);
}

.filter_6 {
    position: relative;
    -webkit-filter: contrast(150%) saturate(110%);
    filter: contrast(150%) saturate(110%);
}

.filter_6:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 1;
    background: -webkit-radial-gradient(undefined, circle undefined, rgba(0, 0, 0, 0) 70%, rgba(34, 34, 34, 1) 100%);
}

.filter_7 {
    position: relative;
    -webkit-filter: sepia(22%) brightness(110%) contrast(85%) saturate(75%);
    filter: sepia(22%) brightness(110%) contrast(85%) saturate(75%);
}

.filter_7:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: soft-light;
    opacity: 0.5;
    background: rgba(173, 205, 239, 1);
}

.filter_8 {
    position: relative;
    -webkit-filter: brightness(90%) contrast(150%);
    filter: brightness(90%) contrast(150%);
}

.filter_8:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: screen;
    opacity: 0.5;
    background: -webkit-radial-gradient(undefined, circle undefined, rgba(15, 78, 128, 1) 1%, rgba(59, 0, 59, 1) 100%);
}

.filter_9 {
    position: relative;
    -webkit-filter: sepia(30%) brightness(110%) saturate(160%) hue-rotate(350deg);
    filter: sepia(30%) brightness(110%) saturate(160%) hue-rotate(350deg);
}

.filter_9:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: screen;
    opacity: 0.3;
    background: rgba(204, 68, 0, 1);
}

.filter_10 {
    position: relative;
    -webkit-filter: sepia(30%);
    filter: sepia(30%);
}

.filter_10:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: color-burn;
    opacity: 1;
    background: -webkit-radial-gradient(undefined, circle undefined, rgba(224, 231, 230, 1) 40%, rgba(43, 42, 161, 0.6) 100%);
}

.filter_11 {
    position: relative;
    -webkit-filter: sepia(30%) brightness(110%) contrast(110%) grayscale(100%);
    filter: sepia(30%) brightness(110%) contrast(110%) grayscale(100%);
}

.filter_11:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    opacity: 1;
    background: rgba(0, 0, 0, 0);
}

.filter_12 {
    position: relative;
    -webkit-filter: brightness(120%) contrast(90%) saturate(110%);
    filter: brightness(120%) contrast(90%) saturate(110%);
}

.filter_12:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: multiply;
    opacity: 0.5;
    background: -webkit-radial-gradient(undefined, circle undefined, rgba(255, 177, 166, 1) 50%, rgba(52, 33, 52, 1) 100%);
}

.filter_13 {
    position: relative;
    -webkit-filter: sepia(20%) contrast(90%);
    filter: sepia(20%) contrast(90%);
}

.filter_13:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: overlay;
    opacity: 1;
    background: -webkit-radial-gradient(undefined, circle undefined, rgba(208, 186, 142, 1) 20%, rgba(29, 2, 16, 0.2) 100%);
}

.filter_14 {
    position: relative;
    -webkit-filter: brightness(110%) contrast(90%);
    filter: brightness(110%) contrast(90%);
}

.filter_14:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: overlay;
    opacity: 1;
    background: -webkit-radial-gradient(center center, circle closest-corner, rgba(168, 223, 193, 0.4) 1%, rgba(183, 196, 200, 0.2) 100%);
}

.filter_15 {
    position: relative;
    -webkit-filter: brightness(120%) contrast(90%) saturate(85%) hue-rotate(20deg);
    filter: brightness(120%) contrast(90%) saturate(85%) hue-rotate(20deg);
}

.filter_15:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: darken;
    opacity: 1;
    background: linear-gradient(to right, rgba(66, 10, 14, 0.2) 1%, rgba(66, 10, 14, 0) 100%);
}

.filter_16 {
    position: relative;
    -webkit-filter: brightness(110%) contrast(110%) saturate(130%);
    filter: brightness(110%) contrast(110%) saturate(130%);
}

.filter_16:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    position: absolute;
    mix-blend-mode: screen;
    opacity: 1;
    background: rgba(243, 106, 188, 0.3);
}

.graybg {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    bottom: 0;
    right: 0;
    z-index: 66;
}

.flex-center {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    -o-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
    -ms-flex-align: center;
}

/*预览弹框*/
.block {
    display: block;
}

.previewlayer {
    width: 1000px;
    height: 550px;
    background: #fff;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -500px;
    margin-top: -265px;
    z-index: 999;
    padding: 20px 30px 0;
}

.previewlayer .closed, .modal-box .modal-close {
    width: 45px;
    position: absolute;
    line-height: 45px;
    cursor: pointer;
    font-size: 40px;
    overflow: hidden;
    text-align: center;
}

.previewlayer .closed {
    color: #fff;
    top: -10px;
    right: -45px;
}

.modal-box {
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    position: fixed;
    left: 50%;
    margin-left: -250px;
    margin-top: -230px;
    z-index: 999;
    min-width: 500px;
    min-height: 200px;
    top: 300px;
    text-align: center;
    padding: 0;
}

.modal-box .modal-close {
    top: 0;
    right: 5px;
    font-size: 30px;
    color: #000;
    margin: 0;
}

.modal-box .modal-title {
    margin: 0;
    min-height: 45px;
    line-height: 45px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #eee;
    padding: 0 20px;
    text-align: left;
}

.modal-box .modal-content {
    line-height: 110px;
    text-align: center;
    margin: 0;
    padding: 0 20px;
}

@keyframes msg-show {
    from {
        top: -100px;
    }
    to {
        top: 70px;
    }
}

@-moz-keyframes msg-show /* Firefox */
{
    from {
        top: -100px;
    }
    to {
        top: 70px;
    }
}

@-webkit-keyframes msg-show /* Safari 和 Chrome */
{
    from {
        top: -100px;
    }
    to {
        top: 70px;
    }
}

@-o-keyframes msg-show /* Opera */
{
    from {
        top: -100px;
    }
    to {
        top: 70px;
    }
}

.modal-msg {
    margin-left: -150px;
    margin-top: 0;
    top: 70px;
    min-width: 300px;
    min-height: 100px;
    z-index: 1000;
    background: rgba(77, 211, 197, 0.75);
    animation: msg-show .5s;
    -moz-animation: msg-show .5s; /* Firefox */
    -webkit-animation: msg-show .5s; /* Safari 和 Chrome */
    -o-animation: msg-show .5s; /* Opera */
    color: #FFF;
}

.modal-msg .modal-content {
    line-height: 100px !important;
    margin: 0;
}

/*.modal-box .btns{min-width: 480px; min-height: 35px;}*/
.modal-box .btns-alert {
    width: 110px;
    min-height: 35px;
    margin: 0 auto;
}

.modal-box .btns-confirm {
    width: 210px;
    min-height: 35px;
    margin: 0 auto;
}

.modal-box .btns-confirm a:not(:first-child) {
    margin-left: 5px;
}

.btn-default {
    display: block;
    min-height: 30px;
    line-height: 30px;
    min-width: 100px;
    background-color: #FFFFFF;
    color: #333;
    border: 1px solid #adadad;
    border-radius: 5px;
    float: left;
}

.btn-default:hover {
    background-color: #e6e6e6;
}

.btn-primary {
    display: block;
    min-height: 30px;
    line-height: 30px;
    min-width: 100px;
    background-color: #4DD3C5;
    color: #FFF;
    border: 1px solid transparent;
    border-radius: 5px;
    float: left;
}

.btn-primary:hover {
    background-color: #44bdb1;
}

.previewlayer .closed:hover, .modal-box .modal-close:hover, .music-edit .closed:hover {
    color: #4DD3C5;
}

.previewlayer h1 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.previewlayer .video {
    position: relative;
    width: 560px;
    height: 315px;
}

.previewlayer .word {
    width: 350px;
    margin-left: 30px; /* overflow: hidden */
}

.previewlayer .word span {
    display: block;
    line-height: 26px;
    padding-bottom: 20px;
}

.previewlayer .word span b {
    color: #333333;
    font-size: 20px;
    padding-right: 20px;
    font-weight: bold;
}

.previewlayer .word span i {
    color: #696969;
    font-size: 14px;
}

.previewlayer .word strong {
    display: block;
    font-size: 20px;
    color: #4dd3c5;
    padding-bottom: 13px;
}

.previewlayer .word ul {
    position: relative; /* border-top: 1px solid #eaeaea; */ /* border-bottom: 1px solid #eaeaea; */
    color: #999999;
    font-size: 14px;
    line-height: 30px;
    height: 275px;
}

.previewlayer .word ul li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    padding-top: 3px;
}

.previewlayer .word ul li img {
    float: left;
    width: 20px;
    height: 20px;
    margin: 5px 10px 5px 0;
}

.previewlayer .word ul li i {
    float: left;
}

.previewlayer .word ul li label {
    float: left;
}

.previewlayer .word ul li em {
    color: #0D7BF7
}

.previewlayer .word ul .btns {
    position: absolute;
    bottom: 17px;
    text-align: center;
    width: 100%;
}

.previewlayer .word .typeitem.typeitem1 {
    border-top: 1px solid #eaeaea;
    padding-top: 15px;
}

.previewlayer .word .typeitem label {
    width: 40px;
    text-indent: 2px;
}

.previewlayer .word .screentype {
    float: left;
}

.previewlayer .word .screentype, .previewlayer .word .seriestype {
    float: left;
    width: calc(100% - 60px);
    margin-left: 10px;
}

.previewlayer .word .seriestype a, .previewlayer .word .screentype a {
    float: left;
    width: 60px;
    height: 28px;
    margin-right: 10px;
    margin-bottom: 10px;
    line-height: 28px;
    text-align: center;
    border: 1px solid #eaeaea;
    color: #696969;
    font-size: 13px;
    border-radius: 3px;
}

.previewlayer .word .seriestype a.active, .previewlayer .word .screentype a.active {
    border: 1px solid #4dd3c5;
    background: #4dd3c5;
    color: #fff;
}

.previewlayer .word .btns a {
    float: left;
    width: 43%;
    height: 40px;
    margin-right: 4%;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    background: #0D7BF7;
    font-size: 15px;
}

.previewlayer .word .btns a:hover {
    background-color: #0D7cF7;
}

.previewlayer .word .btns i {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    margin: 10px 0;
    background: url(/static/images/tip_ico.png) no-repeat center;
    cursor: pointer;
}

.previewlayer .word .btns i .tips {
    display: none;
    position: absolute;
    width: 350px;
    right: -20px;
    top: 40px;
    padding: 20px 15px 10px;
    z-index: 100;
    background: #fff;
    border-radius: 4px;
    color: #696969;
    font-size: 13px;
    box-shadow: 0 0 10px 0 #ccc;
}

.previewlayer .word .btns i .tips::before {
    content: '';
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    transform: rotate(-45deg);
    top: -5px;
    right: 20px;
    background: #fff;
    box-shadow: 5px -5px 10px -3px #ccc;
}

.previewlayer .word .btns i .tips p {
    color: #4dd3c5;
    line-height: 20px;
}

.previewlayer .word .btns i .tips span {
    display: block;
    padding-bottom: 10px;
}

.previewlayer .word .btns i:hover .tips {
    display: block;
}

.previewlayer .thumb-title {
    display: block;
    font-weight: bold;
    margin-top: 10px;
}

.previewlayer .thumb-list {
    position: relative;
    height: 122px;
    margin-top: 5px; /*max-width: 800px;*/
    padding: 10px 0;
    background-color: #F5F5F5;
    overflow: hidden;
}

.previewlayer .thumb-list:hover a {
    display: block;
}

.previewlayer .thumb-list a {
    display: none;
    position: absolute;
    top: 50%;
    font-size: 16px;
    height: 30px;
    width: 30px;
    line-height: 28px;
    margin-top: -15px;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 15px;
    text-align: center;
    color: #FFF;
}

.previewlayer .thumb-list a.arrow-left {
    left: 20px;
}

.previewlayer .thumb-list a.arrow-right {
    right: 20px;
}

.previewlayer .thumb-list a:hover {
    background-color: #4DD3C5;
}

.previewlayer .thumb-list ul {
    float: left;
    height: 102px;
    overflow: hidden;
    transition: all 2s;
    -moz-transition: all 2s; /* Firefox 4 */
    -webkit-transition: all 2s; /* Safari and Chrome */
    -o-transition: all 2s; /* Opera */
}

.previewlayer .thumb-list ul li {
    padding: 3px;
    float: left;
    margin-left: 10px;
}

.previewlayer .thumb-list ul li.on {
    background-color: #4DD3C5;
}

.table-account-lists {
    width: 100%;
}

.table-account-lists th, .table-account-lists td {
    height: 40px;
    line-height: 40px;
    text-align: center;
}

.table-account-lists th {
    font-weight: bold;
}

.table-account-lists tbody tr:hover {
    background-color: #F5F5F5;
}

.table-account-lists tbody tr:nth-of-type(odd) {
    background-color: #F9F9F9;
}

/*支付弹框*/
.zhifutkmain {
    position: fixed;
    width: 684px;
    height: 470px;
    background: #fff;
    top: 50%;
    left: 50%;
    margin-top: -271px;
    margin-left: -342px;
    z-index: 99;
    border-radius: 4px;
    box-shadow: 5px 5px 0 rgba(77, 211, 197, 0.4);
}

.zhifutkmain .closed {
    width: 27px;
    height: 27px;
    position: absolute;
    top: -13px;
    right: -13px;
    border-radius: 50%;
    overflow: hidden;
    background: #4fd3c6;
    color: #fff;
    line-height: 25px;
    text-align: center;
    font-size: 22px;
    cursor: pointer;
}

.zhifutkmain .closed:hover {
    border: 1px solid #FFF;
}

.zhifutkmain .mtitle {
    padding-top: 30px;
    background: #2dc8b8;
    overflow: hidden;
    padding-left: 44px;
}

.zhifutkmain .mtitle li {
    float: left;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    text-align: center;
    color: #fff;
    height: 44px;
    line-height: 44px;
    width: 100px;
    margin-right: 10px;
    background: #47e3d3;
    cursor: pointer;
    font-size: 16px;
}

.zhifutkmain .mtitle li.on {
    color: #4dd3c5;
    background: #fff;
}

.zhifutkmain .contmtb {
    padding: 0 44px;
}

.zhifutkmain .contmtb .stips {
    font-size: 16px;
    color: #575757;
    padding: 24px 0;
}

.zhifutkmain .contmtb .stips em {
    margin: 0 6px;
    font-weight: bold;
    color: #ff9270
}

.zhifutkmain .contmtb .zftle {
    border-bottom: 1px solid #f5f5f5;
    font-size: 14px;
    color: #575757;
    font-weight: bold;
    padding-bottom: 12px;
}

.zhifutkmain .smpt {
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
}

.zhifutkmain .yuecont {
    border: 2px solid #e8e8e8;
    width: 130px;
    height: 70px;
    text-align: center;
    padding: 6px 20px 0;
    position: relative;
    cursor: pointer;
}

.zhifutkmain .yuecont i {
    display: block;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 6px;
    font-size: 16px;
    font-weight: bold;
}

.zhifutkmain .yuecont span {
    display: block;
    padding-top: 6px;
    font-size: 13px;
}

.zhifutkmain .yuecont span em {
    color: #ff9270;
    margin: 0 4px;
}

.zhifutkmain .yuecont:after {
    display: none;
    content: "";
    position: absolute;
    bottom: 0;
    right: -1px;
    width: 21px;
    height: 16px;
    background: url(/static/images/tuicios.png) no-repeat center;
}

.zhifutkmain .yuecont.on, .zhifutkmain .yuecont:hover {
    border-color: #4dd3c5;
}

.zhifutkmain .yuecont.on:after {
    display: block;
}

.zhifutkmain .splt {
    padding: 8px 0 0 30px;
    color: #696969;
    font-size: 14px;
}

.zhifutkmain .splt a {
    color: #4dd3c5;
    margin-left: 10px;
}

.zhifutkmain .splt a:hover {
    color: #36938a;
}

.zhifutkmain .splt em {
    color: #ff7200;
}

.zhifutkmain .splt span {
    display: block;
    line-height: 24px;
}

.zhifutkmain .zfwxcnt {
    width: 130px;
}

.zhifutkmain .zfwxcnt li {
    border: 2px solid #e8e8e8;
    margin-top: 10px;
    cursor: pointer;
    position: relative;
}

.zhifutkmain .zfwxcnt li:after {
    display: none;
    content: "";
    position: absolute;
    bottom: 0;
    right: -1px;
    width: 21px;
    height: 16px;
    background: url(/static/images/tuicios.png) no-repeat center;
}

.zhifutkmain .zfwxcnt li.on:after {
    display: block;
}

.zhifutkmain .zfwxcnt li.on, .zhifutkmain .zfwxcnt li:hover {
    border-color: #4dd3c5;
}

.zhifutkmain .zfwxcnt li img {
    display: block;
}

.zhifutkmain .ewmicont {
    padding: 8px 0 0 30px;
    color: #696969;
    font-size: 14px;
}

.zhifutkmain .ewmicont img {
    width: 100%;
    margin: 0 auto;
    display: block
}

.zhifutkmain .ewmicont .pic {
    width: 124px;
    height: 122px;
    background: url(/static/images/borderbg.png) no-repeat center;
    padding: 9px 10px;
    position: relative;
}

.zhifutkmain .ewmicont .pic p {
    display: block;
    position: absolute;
    top: 9px;
    left: 10px;
    bottom: 9px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    padding-top: 30px;
    text-align: center;
    color: #fff;
    line-height: 22px;
}

/*.zhifutkmain .ewmicont .pic:hover p{display: block; }*/
.zhifutkmain .btns {
    padding: 0 10px;
    margin-top: 130px;
}

.zhifutkmain .btns a {
    display: block;
    text-align: center;
    width: 120px;
    height: 38px;
    line-height: 38px;
    background: #4dd3c5;
    color: #fff;
    font-size: 15px;
    margin: 0 auto;
    border-radius: 6px;
}

.zhifutkmain .btns a:hover {
    background: #44bdb1;
}

.zhifutkmain .ztips {
    padding-top: 10px;
    font-size: 12px;
    color: #999;
    width: 100%;
    float: left;
}

.zhifutkmain .ztips i {
    color: #ff0101;
    padding: 0 4px;
}

.zhifutkmain .stipsd {
    color: #999;
    font-size: 13px;
    line-height: 20px;
    padding: 18px 0 0;
}

.zhifutkmain .stipsd b {
    font-weight: bold;
    color: #575757;
    font-size: 14px;
    padding-right: 20px;
}

.zhifutkmain .muncont li {
    float: left;
    border: 2px solid #e8e8e8;
    text-align: center;
    font-size: px;
    width: 130px;
    height: 90px;
    cursor: pointer;
    margin-right: 15px;
    position: relative;
}

.zhifutkmain .muncont li.on:after {
    display: none;
    content: "";
    position: absolute;
    bottom: 0;
    right: -1px;
    width: 21px;
    height: 16px;
    background: url(/static/images/tuicios.png) no-repeat center;
}

.zhifutkmain .muncont li.on:after {
    display: block;
}

.zhifutkmain .muncont li.on, .zhifutkmain .muncont li:hover {
    border-color: #4dd3c5;
}

.zhifutkmain .muncont li b {
    display: block;
    font-size: 22px;
    color: #696969;
    padding: 6px 0 2px;
    line-height: 35px;
}

.zhifutkmain .muncont li span {
    display: block;
    color: #696969;
    font-size: 14px;
}

.zhifutkmain .muncont li p {
    display: block;
    color: #c1c1c1;
    font-size: 14px;
}

.zhifutkmain .muncont li i {
    color: #ff7200;
    margin: 0 4px;
}

.zhifutkmain .zftles {
    font-size: 14px;
    color: #575757;
    font-weight: bold;
    padding-bottom: 8px;
}

/* 自由创作 */
.freestyle img {
    display: block;
}

.fstype {
    background: #fff;
    text-align: center;
    margin-bottom: 40px;
}

.fstype a {
    position: relative;
    display: inline-block;
    width: 126px;
    height: 36px;
    line-height: 36px;
    margin: 20px;
    border-radius: 18px;
    color: #333;
}

.fstype a.on {
    background: #1fd3cd;
    color: #fff
}

.fstype a.on::after {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
    height: 3px;
    width: 30px;
    background: #1fd3cd;
    color: #1fd3cd;
}

.fstype a i {
    margin-right: 10px;
}

.fscont .fsitem {
    width: 282px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06);
    background: #fff;
    border-radius: 4px;
    margin-bottom: 30px;
    overflow: hidden
}

.fscont .fsitem:not(:nth-child(5n+4)) {
    margin-right: 20px;
}

.fscont .fsitem img {
    width: 262px;
    height: 200px;
    margin: 10px;
    border-radius: 2px;
}

.fscont .fsitem .iteminfo {
    width: 262px;
    height: 80px;
    margin: 0 auto;
    color: #333;
}

.fscont .fsitem .iteminfo p {
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    font-size: 15px;
}

.fscont .fsitem .iteminfo em {
    color: #1fd3cd
}

.fscont .fsitem:hover .iteminfo, .fscont .fsitem .usebtn {
    display: none
}

.fscont .fsitem:hover .usebtn {
    display: block;
    height: 80px;
    overflow: hidden;
}

.fscont .fsitem:hover .usebtn a {
    display: block;
    width: 120px;
    height: 36px;
    line-height: 36px;
    margin: 16px auto 0;
    background: #1fd3cd;
    color: #fff;
    text-align: center;
    border-radius: 3px;
}

/* 自由创作详情页 */
.fsdetail {
    padding: 40px 0;
    background: #fdfdfd;
}

.fsdetail .totalinfo img {
    float: left;
    width: 550px;
    height: 310px;
}

.fsdetail .totalinfo .infocont {
    margin-left: 40px;
}

.fsdetail .totalinfo .infocont h1 {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

.fsdetail .totalinfo .infocont em {
    display: block;
    color: #1fd3cd;
    margin-bottom: 20px;
}

.fsdetail .totalinfo .infocont p {
    margin-bottom: 10px;
    color: #696969;
}

.fsdetail .totalinfo .infocont .useway {
    margin-top: 20px;
}

.fsdetail .totalinfo .infocont .useway label {
    float: left;
    width: 45px;
    color: #141414;
}

.fsdetail .totalinfo .infocont .useway span {
    float: left;
    width: 500px;
    color: #696969;
}

.fsdetail .totalinfo .infocont .createbtn {
    display: block;
    width: 120px;
    height: 34px;
    line-height: 34px;
    margin-top: 20px;
    text-align: center;
    color: #fff;
    background: #1fd3cd;
    border-radius: 4px;
}

/*2017-10-11 新增*//*顶部分类*/
.hfvideo {
    font-size: 14px;
    background: #f8f8f8;
    line-height: 30px;
}

.hfvideo .videotype {
    padding: 15px 0;
    background: #fff;
    border-bottom: 1px solid #f4f4f4;
}

.hfvideo .videotype label {
    float: left;
    margin-left: 30px;
    height: 30px;
    color: #999;
}

.hfvideo .videotype .typewrap a:hover, .hfvideo .videotype .typewrap a.active {
    background: #4ad4c4;
    border-color: #4ad4c4;
    color: #fff;
}

.videotype .typewrap .subtype {
    padding-top: 15px;
}

.videotype .typewrap .maintype {
    padding-bottom: 15px;
}

.videotype .typewrap .maintype a, .videotype .typewrap .subtype a {
    float: left;
    height: 30px;
    line-height: 30px;
    color: #696969;
    padding: 0 20px;
    border: 1px solid #e9e9e9;
    border-radius: 15px;
    margin: 5px;
}

.videotype .typewrap .underline {
    border-bottom: 1px solid #e9e9e9;
}

/*搜索栏*/
.hfvideo .searchtype {
    background: #ecebeb;
    padding: 10px 0;
    line-height: 25px;
}

.hfvideo .searchtype .searchitem {
    margin-left: 10px;
    cursor: pointer;
    font-size: 13px;
}

.hfvideo .searchtype label {
    float: left;
    height: 25px;
    color: #999
}

.hfvideo .searchtype .selectbox span {
    display: block;
    height: 25px;
    width: 125px;
    padding-left: 20px;
    background: url(/static/images/arrowicon_down.png) no-repeat 100px center;
    border-right: 1px solid #d2d2d2;
}

.hfvideo .searchtype .selectbox.on span {
    background: url(/static/images/arrowicon_up.png) no-repeat 100px center;
}

.hfvideo .searchtype .selectbox .selectcont {
    display: none;
    left: -10px;
    top: 25px;
    padding: 10px;
    width: 130px;
    background: #fff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .15);
    z-index: 100;
}

.hfvideo .searchtype .selectbox.on .selectcont {
    display: block;
}

.hfvideo .searchtype .selectbox .selectcont a {
    display: block;
    width: 110px;
    padding-left: 20px;
    height: 27px;
    line-height: 27px;
    margin: 5px auto;
    font-size: 13px;
    color: #696969;
}

.hfvideo .searchtype .selectbox .selectcont a:hover, .hfvideo .searchtype .selectbox .selectcont a.active {
    background: #e8f0ef;
    color: #4cd3c5;
}

.hfvideo .searchtype .sortbox span {
    width: 100px;
    border: 0;
    background: url(/static/images/arrowicon_down.png) no-repeat 60px center;
}

.hfvideo .searchtype .sortbox .selectbox.on span {
    width: 100px;
    border: 0;
    background: url(/static/images/arrowicon_up.png) no-repeat 60px center;
}

.hfvideo .searchtype .sortbox .selectcont {
    width: 90px;
}

.hfvideo .searchtype .sortbox .selectcont a {
    width: 70px;
}

/*.hfvideo .searchtype span {    float: left;    width: 60px;    height: 40px;    line-height: 40px;}.hfvideo .searchtype a {    float: left;    padding: 3px 5px;    margin: 6px 30px 0 0;}.hfvideo .searchtype .timetype {    width: 1000px;}.hfvideo .searchtype a:hover,.hfvideo .searchtype a.on {    background: #4cd3c5;    color: #fff;    border-radius: 3px;}.hfvideo .searchbox {    right: 17px;    top: 0px;    width: 193px;    height: 38px;    border: 1px solid #e3e3e3;}.hfvideo .searchbox input {    float: left;    height: 36px;    width: 148px;    border: 0;    padding: 0 0 0 15px;    margin: 0;    font-size: 14px;}.hfvideo .searchbox a {    float: left;    height: 36px;    width: 40px;    margin: 0;    padding: 0;    background: url(/static/images/searchicon.png) center no-repeat;}.hfvideo .searchbox a:hover {    background: url(/static/images/searchicon.png) center no-repeat;    ;} *//*列表页*/
.hfvideo .videolist {
    padding: 20px 0;
}

.hfvideo .videolist .wrap {
    min-height: 600px;
}

.hfvideo .videolist li {
    margin-bottom: 20px;
    overflow: hidden; /*border: 1px solid #e3e3e3;*/
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 10px #ddd;
}

.hfvideo .videolist li a {
    display: block;
    width: 282px;
    background: #fff;
    top: 0;
    position: relative;
}

.hfvideo .videolist li:hover {
    transform: translateY(-6px);
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .3);
    -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .3);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .3);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.hfvideo .videolist li a em {
    display: block;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.hfvideo .videolist li a .mask {
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
    bottom: 0;
    background: url(../../images/new/mask.png) left bottom / 100% 100% no-repeat rgba(0, 0, 0, 0.2);
    display: block;
}

.hfvideo .videolist li a .v-line, .caselist ul.listm li em .v-line {
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: #fff;
    top: 0;
    left: 0;
    display: none;
}

.hfvideo .videolist li a em img { /*display: block;*/
    width: 100%; /*margin: 0 auto;*/
}

.hfvideo .videolist li a em b {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/static/images/bfico.png) no-repeat center rgba(0, 0, 0, .1);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

.hfvideo .videolist li a:hover em b {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.hfvideo .videolist li a:hover p {
    display: none;
}

.hfvideo .videolist li a:hover .videoinfo {
    display: none;
}

.hfvideo .videolist li a:hover .mask {
    display: none;
}

.hfvideo .videolist li a:hover .videoadd {
    display: block;
}

.hfvideo .videolist li a .videoadd {
    display: none;
    height: 88px;
}

.hfvideo .videolist li a .videoadd button {
    display: block;
    cursor: pointer;
    width: 120px;
    height: 40px;
    background-color: #4ad4c4;
    border: none;
    border-radius: 3px;
    color: #FFFFFF;
    margin: 22px auto;
}

.hfvideo .videolist li a .videoadd button:hover {
    background-color: #1abc9c;
}

.hfvideo .videolist li p {
    padding: 10px 15px;
    height: 44px;
    background: #fff;
}

.hfvideo .videolist li .videoinfo {
    background: #fff;
    padding: 0 15px 5px;
    height: 30px;
    line-height: 30px;
}

.hfvideo .videolist li .videoinfo i {
    float: left;
    padding-left: 20px;
    color: #bababa;
    margin-right: 20px;
    font-size: 13px;
}

.hfvideo .videolist li .videoinfo i.textnum {
    background: url(/static/images/texticon_on.png) no-repeat center left;
}

.hfvideo .videolist li .videoinfo i.picsnum {
    background: url(/static/images/picicon_on.png) no-repeat center left;
}

.hfvideo .videolist li .videoinfo i.mp4snum {
    background: url(/static/images/mp4icon_on.png) no-repeat center left;
}

.hfvideo .videolist li .videoinfo i.freemodel {
    background: url(/static/images/freeicon.png) no-repeat center left;
}

.hfvideo .videolist li .videoinfo span {
    float: right;
    color: #999;
    font-size: 13px;
}

/*竖屏*/
.screentype-1 {
    height: 340px;
}

/*横屏*/
.screentype-2 {
    height: 192px;
}

/*方屏*/
.screentype-3 {
    height: 340px;
}


.list-vmat {
    width: 340px;
}

.grid-sizer {
    width: 340px;
}

.gutt-sizer {
    width: 25px;
}

.centercont {
    padding: 30px 0 90px;
    background: #f2f3f5;
    min-width: 1200px;
    max-width: 100%;
}

.sharecontm {
    background: #fff;
    height: 726px;
    box-shadow: 3px 3px 6px #ededed;
    font-weight: normal;
}

.sharecontm .vidcont {
    width: 730px;
    box-shadow: 3px 3px 6px #ededed;
    padding: 57px 60px;
    height: 726px;
}

.sharecontm .vidcont .videoct {
    height: 345px;
    overflow: hidden;
}

.sharecontm .vidcont .videoct i {
    display: none
}

.sharecontm .vidcont .videoct:hover i {
    display: block
}

.sharecontm .vidcont .info {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
    background: #f2f3f5;
    margin-top: 20px;
}

.sharecontm .vidcont .info span {
    display: block;
    float: left;
}

.sharecontm .vidcont .info span a {
    display: inline-block;
    margin: 0 20px 0 10px;
    font-size: 14px;
    color: #333333;
}

.sharecontm .vidcont .info span a.dn {
    color: #53d2c7;
}

.sharecontm .vidcont .info i {
    display: block;
    float: right;
    color: #999999;
    font-size: 13px;
}

.sharecontm .wrdcont {
    width: 455px;
    padding: 57px 0px;
}

.sharecontm .wrdcont dl {
    width: 310px;
    margin: 0 auto;
}

.sharecontm .wrdcont dl dt {
    border: 1px solid #eee;
    padding: 12px;
    width: 222px;
    height: 222px;
    position: relative;
    margin: 0 auto;
}

.sharecontm .wrdcont dl dt img {
    display: block;
    width: 100%;
    height: 100%;
}

.sharecontm .wrdcont dl dt i {
    display: block;
    width: 100px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    background: #4cd3c4;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -50px;
    border-radius: 4px;
}

.sharecontm .wrdcont dl dd {
    padding-top: 20px;
}

.sharecontm .wrdcont dl dd .webtxt {
    border: 1px solid #ececec;
    height: 38px;
    line-height: 36px;
    padding: 0 10px;
    font-size: 14px;
    color: #333;
    width: 100%
}

.sharecontm .wrdcont dl dd textarea {
    padding: 8px 10px;
    border: 1px solid #ececec;
    line-height: 20px;
    min-height: 80px;
    font-size: 14px;
    color: #333;
    width: 100%;
}

.sharecontm .wrdcont .zpshare {
    width: 365px;
    margin: 0 auto;
    border: 1px solid #ececec;
    padding: 26px 0;
}

.sharecontm .wrdcont .author {
    width: 310px;
    margin: 0 auto;
    background: #f2f3f5;
    padding: 15px 25px;
    overflow: hidden;
}

.sharecontm .wrdcont .author i {
    display: block;
    float: left;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    overflow: hidden;
}

.sharecontm .wrdcont .author img {
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 50%;
}

.sharecontm .wrdcont .author span {
    display: block;
    float: left;
    padding-left: 20px;
    color: #333333;
    font-weight: bold;
    font-size: 14px;
    line-height: 46px;
}

.sharecontm .wrdcont .author span a {
    color: #4cd2c9;
    margin-right: 10px;
}

.sharecontm .wrdcont .fxbtn {
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
}

.sharecontm .wrdcont .fxbtn a {
    display: block;
    width: 140px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    border-radius: 4px;
    background: #4cd3c4;
    color: #fff;
}

.sharecontm .wrdcont .share {
    padding-top: 30px;
    width: 310px;
    margin: 0 auto;
}

.sharecontm .wrdcont .share .stle fieldset {
    border: 0;
    padding: 0;
    border-top: 1px solid #eee;
}

.sharecontm .wrdcont .share .stle legend {
    padding: 0 20px;
    margin: 0 auto;
    font-size: 15px;
    color: #333333;
    font-weight: bold;
}

.sharecontm .wrdcont .share ul {
    overflow: hidden;
    padding: 20px 0;
}

.sharecontm .wrdcont .share ul li {
    float: left;
    padding: 0 11px;
}

.sharecontm .wrdcont .share ul li img {
    display: block;
}

.sharecontm .wrdcont .share ul li a {
    display: block;
    padding: 6px;
    border-radius: 50%;
    background-color: #d7d7d7;
}

.sharecontm .wrdcont .share ul li a:hover {
    background-color: #4cd3c4;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}

/*搜索无结果*/
.noresult img {
    display: block;
    width: 120px;
    margin: 40px auto;
}

.noresult p {
    display: block;
    width: 100%;
    text-align: center;
    margin: 40px auto;
    color: #aaa;
}

#waterfull .vmat {
    display: block;
    width: 100%;
    height: auto;
}

/*模板列表*/
.list-vmat {
    width: 282px;
}
.cspre{
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 2px;
    background: rgba(255, 255, 255, 1) url(../../images/new/ss.png) no-repeat -28px -2px;
    display: none;
    z-index: 1111;
}
a.cspre{
    opacity: 1;
    line-height: 100px;
    height: 20px;
    overflow: hidden;
}
.zprt:hover .pic .cspre{
    display: block;
}
.grid-sizer {
    width: 220px;
}

.gutt-sizer {
    width: 25px;
}

@media (min-width: 1601px) {
    .mindwd {
        min-width: 1440px;
    }
    .detailecnt .leftpicm {
        width: 930px;
    }
    .detailecnt .rtinform {
        width: 404px;
    }
    .wrap {
        width: 1440px
    }

    /*首页列表*/
    .indpart1 .list .zprt {
        width: 340px;
    }
    .indpart1 .list#waterfull .zprt {
        width: 220px;
    }
    .indpart1 .list .zprt1 {
        width: 256px;
    }
    /*模板列表*/
    .hfvideo .videolist li {
        width: 340px;
    }

    .hfvideo .videolist li a {
        width: 340px;
    }

    /*竖屏*/
    .screentype-1 {
        height: 340px;
    }

    /*横屏*/
    .screentype-2 {
        height: 192px;
    }

    /*方屏*/
    .screentype-3 {
        height: 340px;
    }

    /*.vmat {
        display: block;
        width: 326px;
        height: 184px;
    }*/
    /*.zprt1 .vmat {
        width: 256px;
        height: 452px;
    }*/
    .list-vmat {
        width: 340px;
    }

    .grid-sizer {
        width: 340px;
    }
    #waterfull .grid-sizer {
        width: 220px;
    }

    .gutt-sizer {
        width: 24px;
    }

    /*自由制作*/
    .fscont .fsitem {
        width: 340px;
    }

    .fscont .fsitem:not(:nth-child(5n+4)) {
        margin-right: 25px;
    }

    .fscont .fsitem img {
        width: 320px;
    }

    .fscont .fsitem .iteminfo {
        width: 320px;
    }
}

.tiptkm {
    background: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    z-index: 999; /*display: none;*/
    position: fixed;
    left: 0;
    top: 0;
}

.tiptkm .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.tiptkm .closed {
    width: 28px;
    height: 28px;
    background: url(/static/images/closedicos.png) no-repeat center;
    cursor: pointer;
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 999;
}

.tiptkm .picm {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.tiptkm .picm img {
    display: block;
}

.tiptkm a {
    display: block;
    width: 169px;
    height: 37px;
    line-height: 37px;
    border-radius: 37px;
    background: #3bc9bb;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #fff;
    font-size: 16px;
    position: absolute;
}

/*-- app下载 --*/
.appdownload:hover .downloadcont {
    display: block;
}

.appdownload .downloadcont {
    display: none;
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 225px;
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    overflow: hidden;
    z-index: 101;
}

.appdownload .downloadcont ul {
    display: flex;
    padding: 27px 0 20px;
    text-align: center;
    justify-content: center;
    align-items: flex-start;
}

.appdownload .downloadcont ul .line {
    height: 100px;
    background: #eeeeee;
    width: 1px;
    margin: 0 47px;
}

.appdownload .downloadcont em.desc {
    display: inline-block;
    margin: 0 auto;
}

.appdownload .downloadcont ul .item img {
    display: block;
}

.appdownload .downloadcont ul .item b {
    display: block;
    font-size: 15px;
    color: #999;
}

.appdownload .downloadcont span {
    right: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 44px;
    font-size: 14px;
    color: #999;
    width: 100%;
    background: #f5f6f8;
    text-align: center;
}