• css reset


    @charset "UTF-8";
    /* ---- HTML RESET ---- */
    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;
        outline: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, label, legend {
        display: block;
    }
    body {
        font-size: 100%;
        line-height: 1;
    }
    table {
        border-spacing: 0;
    }
    /* ---- Clearfixes ---- */
    .row:before, .row:after, .clearfix:before, .clearfix:after {
        content: '';
        display: table
    }
    .row:after, .clearfix:after {
        clear: both
    }
    .row, .clearfix {
        zoom: 1
    }
    
    /* ---- GRID Layout ---- */
    *,
    *:after,
    *:before {
        box-sizing: border-box;
        -ms-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        transition:0.5s all;
        -webkit-transition:0.5s all;
        -moz-transition:0.5s all;
        -o-transition:0.5s all;
    }
    
    html{
        font-size:14px;
    }
    body {
        margin: 0 auto;
        color: #333;
        font-size:14px;
        font-family:"Microsoft Yahei", Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
        line-height:200%;
        background: #eaeaec;
    }
    .wrapper {
        clear:both;
        margin: 0 auto;
        width: 100%;
        max-width: 1200px;
    }
    .row {
        width: 100%;
        margin: 0 auto;
    }
    .c1 {
        width: 8.33%;
    }
    .c2 {
        width: 16.66%;
    }
    .c3 {
        width: 25%;
    }
    .c4 {
        width: 33.33%;
    }
    .c5 {
        width: 41.66%;
    }
    .c6 {
        width: 50%;
    }
    .c7 {
        width: 58.33%;
    }
    .c8 {
        width: 66.66%;
    }
    .c9 {
        width: 75%;
    }
    .c10 {
        width: 83.33%;
    }
    .c11 {
        width: 91.66%;
    }
    .c12 {
        width: 100%;
        min-height: 1px;
        float: left;
        position: relative;
    }
    .c1-5 {
        width: 20%;
    }/* This column can be used as a one fifth of the row */
    
    .c1-6 {
        width: 80%;
    }/* This column can be used as a one fifth of the row */
    .c1-8 {
        width: 12.5%;
    }/* This column can be used as a one eigth of the row */
    .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c1-5, .c1-8, .c1-6 {
        min-height: 1px;
        float: left;
        padding-left: 0.715rem;
        padding-right: 0.715rem;
        position: relative;
    }
    .fontprod .produl .c6{
        padding-left: 5px;
        padding-right: 5px;
    }
    .c1.first, .c2.first, .c3.first, .c4.first, .c5.first, .c6.first, .c7.first, .c8.first, .c9.first, .c10.first, .c11.first, .c1-5.first, .c1-8.first, .c1-6.first, .fontprod .produl .c6.first {
        padding-left: 0;
        position: relative;
    }
    
    .c1.last, .c2.last, .c3.last, .c4.last, .c5.last, .c6.last, .c7.last, .c8.last, .c9.last, .c10.last, .c11.last, .c1-5.last, .c1-8.last, .c1-6.last, .fontprod .produl .c6.last {
        padding-right: 0;
        position: relative;
    }
    /* ---- Alignments ---- */
    .centered {
        float: none;
        margin: auto;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .text-left {
        text-align: left;
    }
    .text-right {
        text-align: right;
    }
    .text-center {
        text-align: center;
    }
    .text-justify {
        text-align: justify;
    }
    /* ---- Typography ---- */
    h1, h2, h3, h4, h5, h6 {
        font-weight: none;
        font-style: normal;
        color: #333;
        text-rendering: optimizeLegibility;
        line-height: 1.1;
        margin: 10px 0;
    
    }
    h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
        font-size: 80%;
        color: #8d8d8d;
    }
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        font-weight: inherit;
        text-decoration: none;
    }
    h1 {
        font-size: 35px;
        line-height: 60px;
        color:#ea7f01;
    }
    h2 {
        font-size: 32px;
        line-height: 35px;
        color:#333;
    }
    h3 {
        font-size: 1.75rem;
        line-height: 36px;
    }
    h4 {
        font-size: 1.5rem;
        line-height: 32px;
    }
    h5 {
        font-size: 20px;
        color:#666;
        line-height:30px;
    }
    
    h6 {
        color:#ea7f01;
        font-size: 1.125rem;
        line-height: 20px;
        margin-top:15px;
    }
    a {
        color: #333;
        text-decoration: none;
        line-height: inherit;
    }
    a:hover {
        color: #ea7f01;
    }
    a:focus, a:link, a:active {
        outline: none;
    }
    
    h6 a{
        color:#ea7f01;
    }
    
    p {
        margin: 0px;
        margin-bottom: 0.715rem;
    }
    p a, p a:visited {
        line-height: inherit;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    strong, b {
        color: #ea7f01;
        font-weight: bold;
        line-height: inherit;
        font-size:120%;
    }
    blockquote {
        font-size: 14px;
        border-left: 5px solid #eeeeee;
        color: #7e7e7e;
            padding-left:15px;
    
    }
    small {
        font-size: 80%;
        line-height: inherit;
    }
    i{
        padding-right:0.5rem;
        
    }
    i,
    i:after,
    i:before{
            transition: 0s all;
        -webkit-transition: 0s all;
        -moz-transition: 0s all;
        -o-transition: 0s all;
    }
    hr {
        border: solid #c5c5c5;
        border-width: 1px 0 0;
        clear: both;
        margin: 10px 0 8px;
        height: 0;
    }
    
    
    /* ---- Lists ---- */
    ul, ol, dl {
        line-height:220%;
        list-style-position: inside;
        list-style: none;
    }
    
    .dl-horizontal {
        *zoom: 1;
        margin: 0;
    }
    .dl-horizontal:before, .dl-horizontal:after {
        display: table;
        line-height: 0;
        content: ""
    }
    .dl-horizontal:after {
        clear: both
    }
    .dl-horizontal dt {
        float: left;
        width: 100px;
        overflow: hidden;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0;
        line-height: 48px;
    }
    .dl-horizontal dd {
        float:left;
        width:80%;
        width:-moz-calc(100% - 120px);
        width:-webkit-calc(100% - 120px);
        width:calc(100% - 120px);
        line-height: 220%;
        padding:10px 0;
        margin-left:0px;
        position: relative;
    }
    .dl-horizontal dd span{
        color:#ea7f01;
        position:absolute;
        font-size:0.75rem;
        right:18px;
        top:5px;
        cursor:pointer;
    }
    .dl-horizontal dd span a{
        color:#ea7f01;
    }
    /* ---- Forms ---- */
    .vform {
        width: 100%;
    }
    .hform {
        width: 100%;
    }
    .vform, .hform {
        margin-bottom: 1.428rem;
        font-size:1rem;
        color: #333;
    }
    .vform label {
        width: 100%;
        margin-bottom: 5px;
        
    }
    .vform label, .hform label {
        font-size:14px;
        line-height: 21px;
        vertical-align: middle;
        display: block;
        float: left;
        text-align: left;
        font-weight: bold;
    }
    .hform label {
        width: 20%;
        margin: 8px 0;
    }
    
    .vform textarea, .vform input[type="text"], .vform input[type="password"], .vform input[type="datetime"], .vform input[type="datetime-local"], .vform input[type="date"], .vform input[type="month"], .vform input[type="time"], .vform input[type="week"], .vform input[type="number"], .vform input[type="email"], .vform input[type="url"], .vform input[type="tel"], .vform input[type="color"], .vform select {
        width: 100%;
    }
    .hform textarea, .hform input[type="text"], .hform input[type="password"], .hform input[type="datetime"], .hform input[type="datetime-local"], .hform input[type="date"], .hform input[type="month"], .hform input[type="time"], .hform input[type="week"], .hform input[type="number"], .hform input[type="email"], .hform input[type="url"], .hform input[type="tel"], .hform input[type="color"], .hform select {
        width: 80%;
    }
    .vform textarea, .vform input[type="text"], .vform input[type="password"], .vform input[type="datetime"], .vform input[type="datetime-local"], .vform input[type="date"], .vform input[type="month"], .vform input[type="time"], .vform input[type="week"], .vform input[type="number"], .vform input[type="email"], .vform input[type="url"], .vform input[type="tel"], .vform input[type="color"], .vform select, .vform input[type=file], .hform textarea, .hform input[type="text"], .hform input[type="password"], .hform input[type="datetime"], .hform input[type="datetime-local"], .hform input[type="date"], .hform input[type="month"], .hform input[type="time"], .hform input[type="week"], .hform input[type="number"], .hform input[type="email"], .hform input[type="url"], .hform input[type="tel"], .hform input[type="color"], .hform select {
        display: block;
        background: #ffffff;
        border: 1px solid #cccccc;
        padding: 5px 10px;
        vertical-align: middle;
        outline: none;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        transition: border linear 0.4s, box-shadow linear 0.4s;
        -o-transition: border linear 0.4s, box-shadow linear 0.4s;
        -moz-transition: border linear 0.4s, box-shadow linear 0.4s;
        -webkit-transition: border linear 0.4s, box-shadow linear 0.4s;
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 21px;
        height: 38px;
    }
    .vform input[type="text"]:focus, .vform input[type="password"]:focus, .vform input[type="datetime"]:focus, .vform input[type="email"]:focus, .vform input[type="datetime-local"]:focus, .vform input[type="date"]:focus, .vform input[type="month"]:focus, .vform input[type="time"]:focus, .vform input[type="week"]:focus, .vform input[type="url"]:focus, .vform input[type="number"]:focus, .vform input[type="search"]:focus, .vform input[type="tel"]:focus, .vform textarea:focus, .hform textarea:focus, .hform input[type="text"]:focus, .hform input[type="password"]:focus, .hform input[type="datetime"]:focus, .hform input[type="datetime-local"]:focus, .hform input[type="date"]:focus, .hform input[type="month"]:focus, .hform input[type="time"]:focus, .hform input[type="week"]:focus, .hform input[type="number"]:focus, .hform input[type="email"]:focus, .hform input[type="url"]:focus, .hform input[type="search"]:focus, .hform input[type="tel"]:focus, .hform input[type="color"]:focus {
        color: #444;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.2);
    }
    .vform textarea, .hform textarea {
        min-height: 120px;
    }
    .vform fieldset, .hform fieldset {
        margin-bottom: 10px;
    }
    .vform input[type="file"], .hform input[type="file"] {
        overflow: none;
    }
    /* conjoined inputs */
    .vform span.pre, .hform span.pre, .vform span.post, .hform span.post {
        display: block;
        background-color: #f2f2f2;
        border: 1px solid #cccccc;
        color: #222222;
        line-height: 22px;
        height: 38px;
        position: relative;
        padding: 5px 10px;
        width:20%;
        text-align:center;
    }
    .vform span.pre, .hform span.pre {
        margin-right: -1px;
        float: left;
    }
    .vform span.post, .hform span.post {
        margin-left: -1px;
        float: left;
    }
    .vform input.post, .hform input.post, .vform span.pre, .hform span.pre {
        border-radius: 2px 0 0 2px;
        -moz-border-radius: 2px 0 0 2px;
        -webkit-border-radius: 2px 0 0 2px;
    }
    .vform input.pre, .hform input.pre, .vform span.post, .hform span.post {
        border-radius: 0 2px 2px 0;
        -moz-border-radius: 0 2px 2px 0;
        -webkit-border-radius: 0 2px 2px 0;
    }
    .vform input.pre, .vform input.post {
        width: 80%;
        float: left;
        height: 38px;
    }
    .hform input.pre, .hform input.post {
        width: 80%;
        float: left;
        height: 38px;
    }
    .vform input.pre-post {
        width: 70%;
        float: left;
        height: 38px;
        border-radius: 0;
    }
    .hform input.pre-post {
        width: 40%;
        float: left;
        height: 38px;
        border-radius: 0;
    }
    
    /* ---- Buttons ---- */
    .button {
        background: #222;
        display: inline-block;
        padding: 12px 15px;
        color: #fff !important;
        font-size: 14px;
        font-weight: bold;
        line-height: 1;
        text-decoration: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        position: relative;
        cursor: pointer;
        overflow: visible;
        text-align:center;
        border:0;
    }
    button::-moz-focus-inner {
    border: 0;
    padding: 0;
    }
    a.button {
                -webkit-animation-duration: 1s;
                -webkit-animation-iteration-count: infinite; 
            }
    .button:hover {
        background-color: #111;
        color: #fff;
    }
    .button:active {
        -webkit-transform: translateY(1px);
        -moz-transform: translateY(1px);
    }
    
    /* Large Buttons */
    .large.button {
        padding: 8px 19px 9px;
    }
    /* Colors for our beloved buttons */
    .green.button {
        background-color: #91bd09;
    }
    .green.button:hover {
        background-color: #749a02;
    }
    .blue.button {
        background-color: #2981e4;
    }
    .blue.button:hover {
        background-color: #2575cf;
    }
    .red.button {
        background-color: #e62727;
    }
    .red.button:hover {
        background-color: #cf2525;
    }
    .magenta.button {
        background-color: #a9014b;
    }
    .magenta.button:hover {
        background-color: #630030;
    }
    .orange.button {
        background-color: #ff5c00;
    }
    .orange.button:hover {
        background-color: #ed5500;
    }
    .orangellow.button {
        background-color: #ea7f01;
    }
    .orangellow.button:hover {
        background-color: #fc9200;
    }
    .strike.button {
        background-color: #4ADFC1;
    }
    .strike.button:hover {
        background-color: #39ceb0;
    }
    .white.button {
        background-color: #f5f5f5;
        border: 1px solid #ccc;
        color: #ccc !important;
        font-weight: normal;
        text-shadow: 0 1px 1px rgba(255,255,255,1);
    }
    .white.button:hover {
        background-color: #f5f5f5;
    }
    
    /* ---- Table ---- */
    table {
        width: 100%;
        border: solid #ccc 1px;
        border-left: none;
        border-radius: 2px;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        margin-bottom:20px;
    }
    td, th {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        padding: 8px 10px;
        text-align: center;
        vertical-align: middle;
    }
    th {
        background-color: #fff;
        box-shadow: 0 1px 0 rgba(0,0,0,.1) inset;
        -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset;
        -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1) inset;
        border-top: none;
        text-shadow: 0 1px 0 rgba(255,255,255,.5);
        font-size: 14px;
        line-height: 35px;
        text-align: center;
    }
    td {
        font-size: 14px;
    }
    table tr:first-child th:first-child {
        border-top-left-radius: 2px;
        -moz-border-radius-topleft: 2px;
        -webkit-border-top-left-radius: 2px;
    }
    table tr:first-child th:last-child {
        border-top-left-radius: 2px;
        -moz-border-radius-topleft: 2px;
        -webkit-border-top-left-radius: 2px;
    }
    table tr:last-child td:first-child {
        border-top-left-radius: 2px;
        -moz-border-radius-topleft: 2px;
        -webkit-border-top-left-radius: 2px;
    }
    table tr:last-child td:last-child {
        border-top-left-radius: 2px;
        -moz-border-radius-topleft: 2px;
        -webkit-border-top-left-radius: 2px;
    }
    table tr.even td {
        background-color: #fff;
    }
    /* ---- Tabs ---- */
    .tabs-wrapper {
        display:table;
        width: 100%;
    }
    .tab-item {
        clear: both;
        overflow: hidden;
        padding: 15px 0 ;
    }
    
    .tabs-wrapper .tab-content {
        padding:25px;
        line-height: 200%;
        overflow: hidden;
    }
    ul.tabs {
        float: left;
        height: 50px;
        width: 100%;
        padding-left: 0 !important;
        margin-bottom: 0 !important;
        background-color: #f5f5f5;
        border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        border-bottom:1px solid #ddd;
    }
    
    ul.tabs li {
        float: left;
        padding-left: 0 !important;
        overflow: hidden;
        padding-bottom: 0;
        position: relative;
        text-align: center;
        outline: none;
    }
    ul.tabs li a {
        height: 49px;
        line-height: 49px;
        text-decoration: none;
        display: block;
        padding: 0 25px;
        outline: none;
        color: #9a9a9a;
        font-weight: 600;
        background-color: #f4f4f4;
        border-right:1px solid #ddd;
    
    }
    
    ul.tabs li a:hover {
        color: #ea5413;
    }
    ul.tabs li.active {
        background-color: #fff;
        transition:0s all;
        -webkit-transition:0s all;
        -moz-transition:0s all;
        -o-transition:0s all;
        padding-bottom:2px;
    }
    ul.tabs li.active a {
        color: #ea5413;
        background-color: #fff;
    }
    ul.tabs li a:first-child, ul.tabs li:first-child.active{
        border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
    }
    ul.tabs li.active {
        z-index: 1;
    }
    ul.tabs li.active, ul.tabs li.active a:hover {
        background: #fff;
        color: #ea5413;
    }
    
    /* ---- Pagination ---- */
    .pagenumber {
        margin: 30px 0 0 0;
    }
    .pagenumber ul {
        display: inline-block;
    *display:inline;
    width:auto;
        margin-bottom: 0;
        margin-left: 0;
    *zoom:1;
    }
    .pagenumber ul>li {
        float:left;
        display: inline;
        text-align:center;
        padding:0 5px;
        }
    .pagenumber ul>li>a, .pagenumber ul>li>span {
        float: left;
        min-width:50px;
        font-size:0.75rem;
        padding: 8px 10px;
        line-height: 22px;
        text-decoration: none;
        background-color: #fff;
        color:#666;
        -moz-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
      box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.1);
    }
    .pagenumber ul>.active>a, .pagenumber ul>.active>span {
        color: #999;
        cursor: default
    }
    .pagenumber ul>li>a:hover, .pagenumber ul>li>a:focus, .pagenumber ul>.active>a, .pagenumber ul>.active>span {
        background-color: #ea7f01;
        color: #fff;
    }
    .pagenumber ul>.disabled>span, .pagenumber ul>.disabled>a, .pagenumber ul>.disabled>a:hover, .pagenumber ul>.disabled>a:focus {
        color: #fff;
        background-color:#ea7f01;
        cursor: default;
    }
    .pagenumber ul>li:first-child>a, .pagenumber ul>li:first-child>span {
        font-family: 'FontAwesome';
        min-width:55px;
        border-radius: 20px 0 0 20px;
        -moz-border-radius: 20px 0 0 20px;
        -webkit-border-radius: 20px 0 0 20px;
    }
    .pagenumber ul>li:first-child>a:before, .pagenumber ul>li:first-child>span:before {
      content: "f053";
      transition: 0s all;
        -webkit-transition: 0s all;
        -moz-transition: 0s all;
        -o-transition: 0s all;
    }
    .pagenumber ul>li:last-child>a, .pagenumber ul>li:last-child>span {
        font-family: 'FontAwesome';
        min-width:55px;
        border-radius: 0 20px 20px 0;
        -moz-border-radius: 0 20px 20px 0;
        -webkit-border-radius: 0 20px 20px 0;
    }
    .pagenumber ul>li:last-child>a:before, .pagenumber ul>li:last-child>span:before {
      content: "f054";
      transition: 0s all;
        -webkit-transition: 0s all;
        -moz-transition: 0s all;
        -o-transition: 0s all;
    }
    /*---------to top--------------*/
    #toTop {
        font-family:"FontAwesome";
    display: none;
    text-decoration: none;
    position: fixed;
    bottom: 25px;
    right: 15px;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background:rgba(0,0,0,0.6);
    border: none;
    z-index: 190;
    text-align:center;
    line-height:40px;
    -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius:10px;
        color:#fff;
        
    }
    #toTop:before {
        font-size:1rem;
      content: "f062";
    }
    /*提示信息样式*/
    .ui-ios-overlay {
      z-index: 99999;
      position: fixed;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      margin-left: -100px;
      margin-top: -100px;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000);
      background: rgba(0,0,0,0.8);
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        border-radius: 20px;
        
    }
    .ui-ios-overlay .title {
      color: #FFF;
      text-align: center;
      display: block;
      font-size: 20px;
      position: absolute;
      top: 135px;
      left: 0;
      width: 100%;
      padding:0 25px;
    }
    .ui-ios-overlay .title p{
        font-size:14px;
        font-weight: inherit;
    }
    .ui-ios-overlay img {
      display: block;
      margin: 15% auto 0 auto;
    }
    .ui-ios-overlay .spinner {
      left: 50% !important;
      top: 40% !important;
    }
    .ui-ios-overlay .spinner01 img{
        width:95px;
    }
    .ios-overlay-show {
      -webkit-animation-name: ios-overlay-show;
      -webkit-animation-duration: 750ms;
      -moz-animation-name: ios-overlay-show;
      -moz-animation-duration: 750ms;
      -ms-animation-name: ios-overlay-show;
      -ms-animation-duration: 750ms;
      -o-animation-name: ios-overlay-show;
      -o-animation-duration: 750ms;
      animation-name: ios-overlay-show;
      animation-duration: 750ms;
    }
    
    @-webkit-keyframes ios-overlay-show {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @-moz-keyframes ios-overlay-show {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @-ms-keyframes ios-overlay-show {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @-o-keyframes ios-overlay-show {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes ios-overlay-show {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    
    .ios-overlay-hide {
      -webkit-animation-name: ios-overlay-hide;
      -webkit-animation-duration: 750ms;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-name: ios-overlay-hide;
      -moz-animation-duration: 750ms;
      -moz-animation-fill-mode: forwards;
      -ms-animation-name: ios-overlay-hide;
      -ms-animation-duration: 750ms;
      -ms-animation-fill-mode: forwards;
      -o-animation-name: ios-overlay-hide;
      -o-animation-duration: 750ms;
      -o-animation-fill-mode: forwards;
      animation-name: ios-overlay-hide;
      animation-duration: 750ms;
      animation-fill-mode: forwards;
    }
    
    @-webkit-keyframes ios-overlay-hide {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    @-moz-keyframes ios-overlay-hide {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    @-ms-keyframes ios-overlay-hide {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    @-o-keyframes ios-overlay-hide {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    @keyframes ios-overlay-hide {
      0% { opacity: 1; }
      100% { opacity: 0; }
    }
    /*----end-----*/
    /*提示信息样式01*/
    .sweet-overlay {
      background-color: rgba(0, 0, 0, 0.4);
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: none;
      z-index: 1000;
      }
    .sweet-alert {
      background-color: white;
      font-family: 'Open Sans', sans-serif;
      width: 478px;
      padding: 17px;
      border-radius: 5px;
      text-align: center;
      position: fixed;
      top: 48%;
      right:50%;
      margin-top: -166px;
      margin-right:-240px;
      overflow: hidden;
      display: none;
      z-index: 2000;
    
      }
    
      @media all and (max- 540px) {
        .sweet-alert {
          width: auto;
          margin-left: 0;
          margin-right: 0;
          left: 15px;
          right: 15px; } }
          
      .sweet-alert h2 {
        color: #575757;
        font-size: 30px;
        text-align: center;
        font-weight: 600;
        text-transform: none;
        position: relative;
        margin: 25px 0;
        padding: 0;
        line-height: 25px;
        display: block; }
      .sweet-alert p {
        color: #797979;
        font-size: 16px;
        text-align: center;
        font-weight: 300;
        position: relative;
        margin: 0;
        padding: 0;
        line-height: normal; }
      .sweet-alert button {
        background-color: #AEDEF4;
        color: white;
        border: none;
        box-shadow: none;
        font-size: 17px;
        font-weight: 500;
        border-radius: 5px;
        padding: 10px 32px;
        margin: 26px 5px 0 5px;
        cursor: pointer; }
        .sweet-alert button:focus {
          outline: none;
          box-shadow: 0 0 2px rgba(128, 179, 235, 0.5), inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
        .sweet-alert button:hover {
          background-color: #a1d9f2; }
        .sweet-alert button:active {
          background-color: #81ccee; }
        .sweet-alert button.cancel {
          background-color: #D0D0D0; }
          .sweet-alert button.cancel:hover {
            background-color: #c8c8c8; }
          .sweet-alert button.cancel:active {
            background-color: #b6b6b6; }
          .sweet-alert button.cancel:focus {
            box-shadow: rgba(197, 205, 211, 0.8) 0px 0px 2px, rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px inset !important; }
        .sweet-alert button::-moz-focus-inner {
          border: 0; }
      .sweet-alert[data-has-cancel-button=false] button {
        box-shadow: none !important; }
      .sweet-alert .icon {
        width: 80px;
        height: 80px;
        border: 4px solid gray;
        border-radius: 50%;
        margin: 20px auto;
        padding: 0;
        position: relative;
        box-sizing: content-box; }
        .sweet-alert .icon.warning {
          border-color: #F8BB86; }
          .sweet-alert .icon.warning .body {
            position: absolute;
            width: 5px;
            height: 47px;
            left: 50%;
            top: 10px;
            border-radius: 2px;
            margin-left: -2px;
            background-color: #F8BB86; }
          .sweet-alert .icon.warning .dot {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            margin-left: -3px;
            left: 50%;
            bottom: 10px;
            background-color: #F8BB86; }
  • 相关阅读:
    新学期的合作
    软件工程问题及回答
    《程序猿的生命周期》阅读有感
    《构建之法》13~17章
    阅读《构建之法》十一、十二、十三章之感
    阅读《构建之法》十一、十二、十三章
    【.NET / C#】SubarrayUtils(查找子数组工具类)
    【Java】ComplexTimerTask (TimerTask 拓展封装)
    【Java】AesCbcCodec(AES_CBC加解密工具类)
    【Java】AesEcbCodec(AES_ECB加解密工具类)
  • 原文地址:https://www.cnblogs.com/rage-the-dream/p/6507301.html
Copyright © 2020-2023  润新知