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; }
原文地址:https://www.cnblogs.com/rage-the-dream/p/6507301.html