﻿@charset "UTF-8";

a, blockquote, body, code, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, iframe, img, input, label, li, object, ol, p, q, small, span, strong, table, tbody, td, th, tr,

ul{

    margin: 0;

    padding: 0;

    border: 0;

}

body {

    font-family: STHeiti, Microsoft YaHei, Helvetica, Arial, sans-serif;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    -webkit-text-size-adjust: none;    

    background: rgba(227,0,4, 0.02);

}

a, a:active, a:focus, a:hover, a:visited {

    text-decoration: none

}

a, img {

    -webkit-touch-callout: none

}

li, ol, ul {

    list-style: none

}

input[type=password], input[type=text], textarea {

    resize: none;

    outline: 0;

    -webkit-appearance: none;

    white-space: pre-wrap;

    word-wrap: break-word;

    background: #fff

}

.clearfix:after {

    display: block;

    clear: both;

    content: "";

    visibility: hidden;

    height: 0

}

@media screen and (max-width:320px) {

    html {

        font-size: 42.667px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:321px) and (max-width:360px) {

    html {

        font-size: 48px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:361px) and (max-width:375px) {

    html {

        font-size: 50px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:376px) and (max-width:393px) {

    html {

        font-size: 52.4px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:394px) and (max-width:412px) {

    html {

        font-size: 54.93px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:413px) and (max-width:414px) {

    html {

        font-size: 55.2px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:415px) and (max-width:480px) {

    html {

        font-size: 64px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:481px) and (max-width:540px) {

    html {

        font-size: 72px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:541px) and (max-width:640px) {

    html {

        font-size: 85.33px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:641px) and (max-width:720px) {

    html {

        font-size: 96px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:721px) and (max-width:768px) {

    html {

        font-size: 102.4px;

        font-size: 13.33333vw

    }

}

@media screen and (min-width:769px) {

    html {

        font-size: 102.4px;

        font-size: 13.33333vw

    }

}

body {

    font-family: PingFangSC-Regular, Microsoft YaHei, Helvetica;

    background: #fff;

    font-size:14px;

    overflow-x: hidden;

}

body, html a {

    color: #333

}

.hidden, .none {

    display: none !important

}

@media screen and (min-width:769px) {

    html {

        font-size: 102.4px

    }

    html .wap-wrap {

        width: 768px;

        margin: 0 auto;

    }

}

.wap-wrap{}

.fl {

    float:left;

}

.fr {

    float:right;

}

.por{

    position: relative;

}

.poa{

    position: absolute;

}

.pof{

    position: fixed;

}

.hide{

    display: none !important;

}

.show{

    display: show !important;

}

.text-center{

    text-align: center;

}

.ellipsis{

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: normal;

    display: block;

}

.text-center{

    vertical-align: center;

}

.text-left{

    vertical-align: left;

}

.text-right{

    vertical-align: right;

}

.bg{

    background-color: #f7f7f7;

}

a{

	outline: none;

	text-decoration: none;

}

img{

    max-width: 100%;

}

.container{

    padding:0.2rem;

}



.swiper-banner{

    

    width:7.5rem;

    height:4rem;

    margin-top: 20px;

}

.swiper-banner img{

    width:100%;

    height:100%;

}

.swiper-pagination-bullet{

    width:0.4rem;

    height:0.04rem;

    border-radius: 0px;

    background-color:#fff;

}



.mt20{ margin-top: 20px;}

.logo{ background-color: #329bf6;}

.dadianhua{ color: #fff; font-size: 20px; text-align: center;background-color: #178df9; line-height: 1.8;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;}

.dadianhua a{ color: #fff;}

.shaobiao h2{ line-height: 46px; background-color: #1dc8e4; color:#fff; text-align: center;}

.nav li{ float: left; width: 25%; text-align: center; margin-top: 20px;}

.nav li img{ max-width: 80%;}

.nav li p{ line-height: 40px; color: #363333; font-size: 0.36rem; font-weight: 500;}



/* index */

.title-box{  margin: 15px 0; border-bottom: 5px solid #1dc8e4; }

.title-box h2{ width: 80%; float: left;line-height: 40px; color: #1dc8e4; }

.title-box h2 i{ padding-right: 5px; font-weight: 600;}

.title-box a{color: #5b5b5b;font-size: 14px; float: right; margin-top: 18px;}



.part-3 .title-box h2{ width: 100%; line-height: 1.5em; color: #e1bf0a; font-size: 0.32rem; }

.part-3 p,.zzcont{color: #39292c; line-height: 1.5em;font-size: 18px; padding-top: 10px; text-indent: 2em;}

.zzcont{ padding-top: 40PX;}









.mod-more {

    display: block;

    text-align: center;

    font-size: 16px;

    border-width: 2px;

    margin: 0 auto 20px;

    width: 210px;

    padding:15px 0;

    border-radius: 4px;

    border: 1px solid #90be20;

    color: #90be20;

    transition: all 0.3s ease-in-out;

    cursor: pointer;

}

.mod-more:hover{

    color: #fff;

    background-color: #90be20;

}

.list-nav{

}

.list-nav li{

    width:20%;

    float:left;

    padding:0.1rem 0;

    text-align: center;

}

.list-nav i.fa{

    width:1rem;

    height:1rem;

    line-height: 1rem;

    border-radius: 50%;

    text-align: center;

    font-size:0.5rem;

    color:#fff;

    background-color: #f08200;

}

.list-nav p{

    margin-top:0.2rem;

    line-height: 1em;

    font-size:0.3rem;

}

.list-nav li.n2 .fa{

    background-color: #2ecc71;

}

.list-nav li.n3 .fa{

    background-color: #3ea8ef;

}

.list-nav li.n4 .fa{

    background-color: #f1c40e;

}

.list-nav li.n5 .fa{

    background-color: #f58a86;

}





.pro-list li{ width: 25%; float: left; text-align: center; margin-bottom: 0.25rem; }

.pro-list li .li-pic img{ border-radius: 5px;max-width:100%;}

.pro-list li .li-title{ padding-top: 5px;color: #000; font-size: 0.28rem;}





.part-1{ }

.li-more{

    margin-top:10px;

    text-align: center;

}

.li-more a{

    display: inline-block;

    background-color: #e30000;

    color:#fff;

    border-radius: 5px;

    padding:6px 12px;

}



/* youshi  */

.inbanner {

	height: 120px;

	margin: 0 14px;

	border-radius: 8px;

	background-color: rgba(29,200,228, 1);

}



.inbanner_r {

	height: 80px;

	margin: 20px 0 0 0;

}



.inbanner_r_1 {

	line-height: 1.5;

	font-size: 18px;

	color: #FFF;

	text-align: center;

	padding-top: 20px;

}



.inbanner_r_2 {

	height: 40px;

	line-height: 40px;

	font-size: 24px;

	color: #FFF;

	text-align: center;

}



.inbanner_tel {



	line-height: 1.5;

	background: #FFF;

	margin: 0 auto;

	margin-top: 20px;

	border-radius: 25px;

	box-shadow: 0 7px 7px 0px rgba(0, 150, 255, 0.08);

	font-size: 20px;

	text-align: center;

}



.inbanner_tel span {

	color: #e30000;

	font-weight: bold;

	font-size: 28px;

}



.inbanner_gg {

	height: 70px;

}







/*标题*/

.headerfirst{text-align: center;padding-top: 1%;text-transform: uppercase;    color: #244fa1;}

.headersecond{text-align: center;margin-top: 10px;font-size: 131%;font-family:"微软雅黑";color: #244fa1;background:url(../images/title.png) center no-repeat;height: 48px;line-height: 48px;}

.headersecond a    {float: right; font-size: 14px;font-weight: 100; margin-top: 5px;}

.linea{width:98%;margin:0px auto;background-color:#e6e6e6;height:1px;margin-top: 15px;}

.headerthirt{text-align:center;margin-top: -20px;margin-bottom: 10px;}

/** 内容 **/

.in_nav{overflow: hidden;padding-top: 3%;}

.in_nav li {width:30% ;margin-right:5%; overflow:hidden;float:left;margin-bottom:1.2rem;}

.in_nav li a{display:block;}

.in_nav li img{width:100%;}

.in_nav li:nth-child(3){margin-right:0px;}

.in_nav li:nth-child(6){margin-right:0px;}

.li-duotu{}

.li-duotu li{margin-bottom:0.2rem; float: left;width: 3.45rem; margin-right: 0.2rem; text-align: center;  }

.li-duotu li.even{width:3.45rem; margin-right: 0;}

.li-duotu li .list-thumb img{ width: 100%; }

.li-duotu li .list-title { font-size: 0.28rem;line-height: 0.5rem;color: #000;overflow: hidden; margin-top: 5px; }

.bhcont{padding: 0.2rem;background-color: #f9f9f9; }

.mod-aboutus{

    margin-top:0.5rem;

}

.mod-aboutus .li-aboutus-news{

    padding:0 0.2rem;

}

.li-aboutus-news li{

    border-bottom:1px dashed #ccc;

    border-radius: 5px;

    padding:0.1rem;

}

.li-aboutus-news li:last-child{

    margin-bottom:0px;

    border:0 none;

}

.li-aboutus-news li a{

    position: relative;

    line-height: 0.5rem;

    height:0.5rem;

    display: block;

    color: #333;

}

.li-aboutus-news li .fa{

    float:right;

    color:#1dc8e4;

    margin-right:0.1rem;

}

.mod-news{ background-color:#f4f5f6;}

.list-news li{

}

.list-news li .date{

    float:right;

    color:#999;

    font-size:12px;

}

.list-news li a{

    color:#844b20;

    display: block;

    height: 34px;

    line-height: 34px;

    font-size:16px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.list-news li .fa{

    color:#c80000;

    margin-right:5px;

}

.news-body-menu{

    text-align: center;

    margin-bottom:10px;

}

.list-news{

}

.list-news li{

    border-bottom:1px dashed #ccc;

}

.list-news li:last-child{

    border-bottom:0 none;

}

.list-news li:hover{

}

.list-news li:hover i,

.list-news li:hover .list-title,

.list-news li:hover .list-date{

    color:#3696ca;

}

.list-news i{

    color:#454545;

}

.list-news .list-title{

    display:block;

    line-height: 46px;

    height: 46px;

    color:#454545;

}

.list-news .list-date{

    float:right;

    color:#999;

    font-size:12px;

}

.list-news  i{

    font-size:12px;

}

.picnews-list{

    background: url(../images/picnews-bg.jpg) no-repeat;

    background-size:cover;

}

.list-picnews li{

    background-color: #162638;

    background-color: rgba(22,38,56,0.8);

    margin-bottom:0.2rem;

}

.list-picnews .list-wapper{

    padding:0.2rem;

}

.list-picnews .list-thumb{

    width:3rem;

    height:1.8rem;

    overflow: hidden;

    float:left;

}

.list-picnews .list-thumb img{

    vertical-align: top;

    width:100%;

    height:100%;

}

.list-picnews .list-info{

    margin-left:3.1rem;

    height:1.8rem;

}

.list-picnews .list-title{

    font-size:14px;

    line-height: 0.6rem;

    height:0.6rem;

    color:#fff;

}

.list-picnews .list-desc{

    line-height: 0.4rem;

    height:1.2rem;

    font-size:12px;

    overflow: hidden;

    color:#ccc;

}

.list-picnews .list-date{

    color:#fbb700;

    margin-top:0.2rem;

    font-size:12px;

}

.news-body-menu ul{

    display: flex;

    justify-content: space-around;

     align-items: center;

}

.news-body-menu li{

    padding-bottom:0px;

  text-align: center;

}

.news-body-menu li:first-child{

    border-left:0 none;

}

.news-body-menu li a{

  display: block;

  text-align: center;

  color:#844b20;

  font-size:14px;

  font-weight: 700;

  font-family: "宋体";

  padding:5px;

  border:1px solid #844b20;

}

.news-body-menu li a:hover{

  color:#c80000;

}

.news-body-menu li a.active{

  color:#c80000;

  border-color:#c80000;

}

.list-nav{

    display: flex;

}

.list-nav li{

    width:1%;

    box-flex:1;

    flex: 1 0 auto;

    text-align: center;

}

.list-nav li a{

    display: block;

}

.list-nav li img{

    width:1.2rem;

    height:1.2rem;

    vertical-align: top;

}

.list-nav li p{

    margin-top:.1rem;

    line-height: 0.4rem;

    font-size:.28rem;

}

.subbanner  img{

    vertical-align: top;

}

.subnav{

    background-color: #3696ca;

    width:100%;

}

.subnav ul{

    text-align: center;

    width:100%;

}

.subnav li{

    float:left;

    line-height: 40px;

    height:40px;

    overflow: hidden;

    text-align: center;



}

.subnav a{

    display:block;

    color:#fff;

    font-size:12px;

    border-left:1px solid rgba(255,255,255,.2);

}

.subnav li:last-child a{

    border-right:1px solid rgba(255,255,255,.2);

}

.subnav li.on{

    background-color: #1e84bc;

}

.banner img{

    vertical-align: top;

    width:100%;

}

.breadcrumb{

    background-color: #f7f7f7;

}

.breadcrumb i, .breadcrumb a, .breadcrumb span{

    float: left;

    display: block;

    color:#666;

    font-size:12px;

    line-height: 40px;

    margin: 0 5px;

}

.breadcrumb i.fa{

    margin-left:5px;

}

.title-text{

    margin-bottom:0.4rem;

    background: url('../image/title-text-left.png') no-repeat left top;

    position: relative;

    visibility: hidden;

    opacity: 0;

    text-align: center;

    -webkit-transform: translate(0px, 50px);

            transform: translate(0px, 50px);

    -webkit-transition: all 1.5s ease;

    transition: all 1.5s ease;

}

.title-text .text-inner {

    background: url('../image/title-text-right.png') no-repeat right bottom;

    padding:20px 26px;

    font-size: 14px;

    line-height: 1.6;

}

.title-text.fadeInUp {

    transform: translate(0px,0px);

    -webkit-transform: translate(0px,0px);

    opacity: 1;

    visibility: visible;

}

.article-container{

}

.article-head{

    padding-bottom:0.2rem;

    background:url('../images/i-line.png') repeat-x left bottom;

    text-align: center;

    margin-bottom:0.2rem;

}

.article-head h1{

    font-weight: normal;

    font-size:0.38rem;

    line-height: 1.4;

}

.article-head .info{

    margin-top:10px;

    color:#999;

    display: block;

}

.article-body{

    font-size: 15px;

    line-height: 1.8;

    color:#666;

}

.article-body video {

    width: 100%;

}

.article-body img{

    max-width: 100%;

    height:auto !important;

    vertical-align: top;

}

.article-return{

    display:block;

    width:3rem;

    line-height: 0.6rem;

    height:0.6rem;

    margin:0.4rem auto;

    text-align: center;

    font-size:0.32rem;

    border-radius: 6px;

    color:#fff;

    background-color:#e30000;

}

.show-content1 .article-body{

    padding:0.4rem;

    border:1px solid #7f2500;

}

.article-meta{

    margin-top:20px;

}

.page-container{

background-color: #fff;

}

.page-head{

    background:url('../image/i-line.png') repeat-x left center;

    text-align: center;

    margin-bottom:40px;

}

.page-head h1{

    display: inline-block;

    padding:0 100px;

    background: #fff;

    font-size:40px;

    line-height: 40px;

    font-weight: normal;

    font-family: "楷体";

}

.page-body{

    line-height: 1.8em;

    color:#333;

}

.page-body img{ max-width: 90%; }

.page-body h2,

.title-h2{

    text-align: center;

    color:#084a5d;

    font-size:24px;

    font-weight: bold;

    position: relative;

    line-height: 40px;

    height:40px;

    margin:10px 0 15px;

}

.page-body h2::after,

.title-h2::after{

    content: "";

    display: block;

    width:100%;

    height:5px;

    background-color: #ccc;

    position:absolute;

    top:50%;

    margin-top:-2px;

    z-index: -2;

}

.page-body h2::before,

.title-h2::before{

    content: "";

    display: block;

    width:240px;

    background-color: #fff;

    line-height: 40px;

    height:40px;

    left:50%;

    margin-left: -120px;

    position: absolute;

    z-index: -1;

}

.page-body h3,

.title-h3{

    font-size:16px;

    padding-left:25px;

    line-height: 26px;

    height:26px;

    position: relative;

    margin:10px 0 15px;

}

.page-body h3::after,

.title-h3::after{

    content:"";

    display: block;

    width:10px;

    height:10px;

    position: absolute;

    top:8px;

    background-color: #084a5d;

    left:4px;

}

.footer {background-color: #f9f9f9; color: #333; line-height: 1.8;}

.foot-grid-l{

    padding-left:20px;

}

.foot-grid-r{

    padding-right:20px;

}

.fnav-item{

    float:left;

}

.fnav-item dt{

    line-height: 20px;

    margin-bottom:20px;

    padding-right:100px;

}

.fnav-item dt a{

    font-size:16px;

    color:#aaa;

}

.fnav-item dd a{

    line-height: 24px;

    display: block;

}

.footer .fqrcode{

    margin-top:20px;

    text-align: center;

    font-size:12px;

}

.fqrcode img{

    width:100px;

}

.fqrcode p{

    margin-top:5px;

}

.fcontact{

    text-align:center;

    padding:0.2rem;

    font-size:14px;

    line-height: 2;

}

.fcontact dt{

    font-size:14px;

}

.fcontact dd.ftel{

    font-size:26px;

    line-height: 40px;

    font-family: Helvetica, Arial;

}

.fcontact dd.ftel a{

    color:#ea5442;

}

.copyright{

    font-size: 12px;

    text-align: center; 

	padding-bottom:10px;

}

.scroll-to-top{

    display: none;

    height: 40px;

    width: 40px;

    line-height: 40px;

    position: fixed;

    bottom: 1.2rem;

    right: 10px;

    text-align: center;

    background-color: #1dc8e4;

    border-radius: 5px;

    z-index: 1000;

    cursor: pointer;

}

.scroll-to-top i{

    color:#fff;

    font-size:26px;

    line-height: 40px;

    display: block;

}

.pages {

    width:100%;

    margin-top:20px;

    text-align: center;

}

.pages ul{

    display: inline-block;

}

.pages li {

    display: inline;

}

.pages li a,

.pages li span {

    position: relative;

    float: left;

    padding: 6px 12px;

    line-height: 1.42857;

    text-decoration: none;

    color: #333;

    background-color: #fff;

    border: 1px solid #ddd;

    margin-left: -1px;

}

.pages li:first-child a,

.pages li:first-child span {

    margin-left: 0;

    border-bottom-left-radius: 4px;

    border-top-left-radius: 4px;

}

.pages li:last-child a,

.pages li:last-child span {

    border-bottom-right-radius: 4px;

    border-top-right-radius: 4px;

}

.pages li a:hover,

.pages li a:focus,

.pages li span:hover,

.pages li span:focus {

    z-index: 2;

    color: #084a5d;

    background-color: #eeeeee;

    border-color: #ddd;

}

.pages .active a,

.pages .active a:hover,

.pages .active a:focus,

.pages .active span,

.pages .active span:hover,

.pages .active span:focus {

    z-index: 3;

    color: #fff;

    background-color: #1264c8;

    border-color: #1264c8;

    cursor: default;

}

.pages .disabled span,

.pages .disabled span:hover,

.pages .disabled span:focus,

.pages .disabled a,

.pages .disabled a:hover,

.pages .disabled a:focus {

    color: #777777;

    background-color: #fff;

    border-color: #ddd;

    cursor: not-allowed;

}

.foot-menubar{

    max-width: 768px;

    margin:0 auto; 

    position:fixed;

    bottom:0px;

    left:0px;

    right:0px;

    background-color: #1dc8e4;

    display: flex;

    height:1rem;

    justify-content: center;

     align-items:center;

     z-index: 10;

}

.foot-menubar a{

    display:block;

    flex:1 1 auto;

    color:#fff;

    text-align: center;

    border-right:1px solid #10b7d3;

}

.foot-menubar i{

    color:#fff;

    font-size:0.32rem;

}

.foot-menubar p{

    margin-top:2px;

}

.foot-menubar a:last-child{

    border:0 none;

}

.formDetail .formDetail-head h1 {

  font-size: 22px;

  border-bottom: 1px solid #dddddd;

  line-height: 40px;

  font-weight: normal;

}

.formDetail .formDetail-head h1,

.formDetail .formDetail-head p {

  padding-left: 12px;

}

.formDetail .formDetail-head p {

  padding-top: 12px;

}

.formDetail-body {

  padding: 15px 12px 35px;

}

.formDetail-body .form-group {

  margin-bottom: 10px;

}

.formDetail-body .form-group .col-md-2 {

  line-height: 30px;

  display: block;

}

.formDetail-body .form-group select,

.formDetail-body .form-group input,

.formDetail-body .form-group textarea {

  border: 1px solid #e8e8e8;

  border-radius: 3px;

  padding: 5px 8px;

  line-height: 30px;

  vertical-align: top;

  box-sizing: border-box;

  outline: none;

}

.formDetail-body .form-group select,

.formDetail-body .form-group input {

  height: 35px;

  width: 100%;

}

.formDetail-body .form-group select {

  height: 35px;

  width: 100%;

}

.formDetail-body .form-group textarea {

  width: 770px;

  height: 200px;

}

/*.formDetail-body .form-group span {

  margin-left: 6px;

  font-style: normal;

  font-size: 12px;

  color: #ffa31f;

  line-height: 50px;

}*/

.formDetail-body .form-group button {

  border: 0;

  width: 200px;

  height: 40px;

  border-radius: 3px;

  background-color: #005aab !important;

  color: #fff;

  margin-left:auto;

  margin-right:auto;

  font-size: 18px;

  cursor: pointer;

  display: block;

}



.btn-tijiao button{

    border: 0;

    width: 100%;

    height: 40px;

    border-radius: 3px;

    background-color: #e30000 !important;

    color: #fff;

    margin-left:auto;

    margin-right:auto;

    font-size: 18px;

    cursor: pointer;

    display: block;

  }



.page-ykyc{

}

.ykyc-box{

}

.ykyc-title{

    font-size: 14px;

    padding-left: 25px;

    line-height: 26px;

    height: 26px;

    color:#084a5d;

    font-weight: bold;

    position: relative;

    margin: 5px 0 5px;

}

.ykyc-title::after{

    content:"";

    display: block;

    width:10px;

    height:10px;

    position: absolute;

    top:8px;

    background-color: #084a5d;

    left:4px;

}

.ykyc-content{

    padding:0.2rem 0;

}

.ykyc-content td{

    padding:0.1rem 0;

}

.ykyc-content span{

    color:#d80000;

}

#mychart {

    margin:0 auto;

    width:100%;

    height:300px;

}

.input-txt{

    border: 1px solid #e8e8e8;

    border-radius: 3px;

    padding: 6px 8px;

    line-height: 22px;

    vertical-align: top;

    box-sizing: border-box;

}

.layui-layer{

    background-color:transparent !important;

}

.youDetail-thumb {

    overflow: hidden;

}

.youDetail-thumb img{

    vertical-align: top;

    width:100%;

    height:100%;

    min-height: 4rem;

    -webkit-filter: blur(5px); /* Chrome, Opera */

      -moz-filter: blur(5px);

       -ms-filter: blur(5px);

           filter: blur(4px);

   filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); /* IE6~IE9 */

}

.youDetail-voice{

    margin-bottom:0.2rem;

}

.youDetail-content{

    margin-top:-4rem;

    width:7rem;

    box-sizing: border-box;

    margin-left:auto;

    margin-right:auto;

    border-radius: 10px 10px 0 0;

    background-color: #fff;

    position:relative;

    z-index: 10;

    padding:0.2rem;

}

.db {

	display: block;

}

.weixinAudio {

	line-height: 1.5;

}

.audio_area {

	display: inline-block;

	width: 100%;

	vertical-align: top;

	margin: 0px 1px 0px 0;

	font-size: 0;

	position: relative;

	font-weight: 400;

	text-decoration: none;

	-ms-text-size-adjust: none;

	-webkit-text-size-adjust: none;

	text-size-adjust: none;

}

.audio_wrp {

	border: 1px solid #ebebeb;

	background-color: #fcfcfc;

	overflow: hidden;

	padding: 12px 20px 12px 12px;

}

.audio_play_area {

	float: left;

	margin: 9px 22px 10px 5px;

	font-size: 0;

	width: 18px;

	height: 25px;

}

.playing .audio_play_area .icon_audio_default {

	display: block;

}

.audio_play_area .icon_audio_default {

	background: transparent url(../image/iconloop.png) no-repeat 0 0;

	width: 18px;

	height: 25px;

	vertical-align: middle;

	display: inline-block;

	-webkit-background-size: 54px 25px;

	background-size: 54px 25px;

	background-position: -36px center;

}

.audio_play_area .icon_audio_playing {

	background: transparent url(../image/iconloop.png) no-repeat 0 0;

	width: 18px;

	height: 25px;

	vertical-align: middle;

	display: inline-block;

	-webkit-background-size: 54px 25px;

	background-size: 54px 25px;

	-webkit-animation: audio_playing 1s infinite;

	background-position: 0px center;

	display: none;

}

.audio_area .pic_audio_default {

	display: none;

	width: 18px;

}

.tips_global {

	color: #8c8c8c;

}

.audio_area .audio_length {

	float: right;

	font-size: 14px;

	margin-top: 3px;

	margin-left: 1em;

}

.audio_info_area {

	overflow: hidden;

}

.audio_area .audio_title {

	font-weight: 400;

	font-size: 17px;

	margin-top: -2px;

	margin-bottom: -3px;

	width: auto;

	overflow: hidden;

	text-overflow: ellipsis;

	white-space: nowrap;

	word-wrap: normal;

}

.audio_area .audio_source {

	font-size: 14px;

}

.audio_area .progress_bar {

	position: absolute;

	left: 0;

	bottom: 0;

	background-color: #0cbb08;

	height: 2px;

}

.playing .audio_play_area .icon_audio_default {

	display: none;

}

.playing .audio_play_area .icon_audio_playing {

	display: inline-block;

}

@-webkit-keyframes audio_playing {

	30% {

		background-position: 0px center;

	}

	31% {

		background-position: -18px center;

	}

	61% {

		background-position: -18px center;

	}

	61.5% {

		background-position: -36px center;

	}

	100% {

		background-position: -36px center;

	}

}

