#Mask
{
    position:fixed;
    z-index:28;
    width:100%;
    height:100%;
    background:black;
    opacity:0.6;
}
.span, .span_large{
    float: left;
    width: 50px;
    background-color: #FD3B31;
    height: 50px;
    vertical-align: middle;
    border-radius: 1px;
    position:fixed;
    z-index:29;
    top:50%;
    left:50%
}
.span:last-child{
    margin-right: 0px;
}

/* Timer*/
.timer{
    width: 24px;
    height: 24px;
    background-color: transparent;
    box-shadow: inset 0px 0px 0px 2px #fff;
    border-radius: 50%;
    position: relative;
    margin: 15px auto;/* Not necessary- its only for layouting*/    
 }
.timer:after, .timer:before{
    position: absolute;
    content:"";
    background-color: #fff;
}
.timer:after{
    width: 10px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: minhand 2s linear infinite;
       -moz-animation: minhand 2s linear infinite;
            animation: minhand 2s linear infinite;
}

.timer:before{
    width: 8px;
    height: 2px;
    top: 11px;
    left: 11px;
    -webkit-transform-origin: 1px 1px;
       -moz-transform-origin: 1px 1px;
            transform-origin: 1px 1px;
    -webkit-animation: hrhand 8s linear infinite;
       -moz-animation: hrhand 8s linear infinite;
            animation: hrhand 8s linear infinite;
}

@-webkit-keyframes minhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}

@-webkit-keyframes hrhand{
    0%{-webkit-transform:rotate(0deg)}
    100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
    0%{-moz-transform:rotate(0deg)}
    100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(360deg)}
}
.J_wenxitisi
{
   -webkit-animation: xuan 3s  ;
       -moz-animation: xuan 3s  ;
            animation: xuan 3s  ;
}
@-webkit-keyframes xuan{
    0%{-webkit-transform:translateX(-100%)}
    100%{-webkit-transform:translateX(0px)}
}
@-moz-keyframes xuan{
    0%{-moz-transform:translateX(-100%)}
    100%{ -moz-transform:translateX(0px)}
}
@keyframes xuan{
    0%{transform:translateX(-100%)}
    100%{transform:translateX(0px)}
}

@-webkit-keyframes xuan2{
    0%{-webkit-transform:rotateY(-90deg)}
    100%{-webkit-transform:rotateY(0deg)}
}
@-moz-keyframes xuan2{
    0%{-moz-transform:rotateY(-90deg)}
    100%{ -moz-transform:rotateY(0deg)}
}
@keyframes xuan2{
    0%{transform:rotateY(-90deg)}
    100%{transform:rotateY(0deg)}
}

@-webkit-keyframes suofang{
    0%{-webkit-transform:scale(0.5,0.5) }
    100%{-webkit-transform:scale(1,1)}
}
@-moz-keyframes suofang{
    0%{-moz-transform:scale(0.5,0.5)}
    100%{ -moz-transform:scale(1,1)}
}
@keyframes suofang{
    0%{transform:scale(0.8,0.8)}
    100%{transform:scale(1,1)}
}

.Message 
{
   position:fixed;
  display: table;
  width: 100%;
  background-color: #FD3B31;
  color: #fff;
  top: 0px;
   z-index:101;
}
.Message-body {
  display: table-cell;
  vertical-align: middle;
  padding: 30px 20px 30px 10px;
}
.Message-body > p {
  line-height: 1.2;
  margin-top: 6px;
}
.Message-close 
{
    background-color: #FD3B31;
  position: absolute;
  color: #FFFFFF;
  border: none;
  font-size: 20px;
  right: 10px;
  top: 5px;
}
@-webkit-keyframes daiongInto{
    0%{-webkit-transform:translateY(-100%) }
    100%{-webkit-transform:translateY(0px)}
}
@-moz-keyframes daiongInto{
    0%{-moz-transform:translateY(-100%)}
    100%{ -moz-transform:translateY(0px)}
}
@keyframes daiongInto{
    0%{transform:translateY(-100%)}
    100%{transform:translateY(0px)}
}

@-webkit-keyframes daiongOut{
    0%{-webkit-transform:translateY(0px) }
    100%{-webkit-transform:translateY(-100%)}
}
@-moz-keyframes daiongOut{
    0%{-moz-transform:translateY(0px)}
    100%{ -moz-transform:translateY(-100%)}
}
@keyframes daiongOut{
    0%{transform:translateY(0px)}
    100%{transform:translateY(-100%)}
}

@-webkit-keyframes showli{
    0%{-webkit-transform:translateX(100%) }
    100%{-webkit-transform:translateX(0)}
}
@-moz-keyframes showli{
     0%{-moz-transform:translateX(100%) }
    100%{-moz-transform:translateX(0)}
}
@keyframes showli{
     0%{transform:translateX(100%) }
    100%{transform:translateX(0)}
}

/*弹出层*/
.hidelevel{ height:100%; width:100%; background-color:rgba(0,0,0,.3); position:fixed; z-index:999; left:0; top:0; color:#FFF; display:none;}
.hidelevel .alertinfo{ width:200px; position:absolute; left:50%; top:50%; margin:-45px 0 0 -100px; height:90px; background-color:rgba(0,0,0,.6); border-radius:3px;}
.hidelevel .alertinfo h2{ font-size:12px; padding:10px; font-weight:normal; border-bottom:1px solid #666;}
.hidelevel .alertinfo p a{ width:50%; display:inline-block; float:left; text-align:center; color:#FFF; text-decoration:none; font-size:14px; line-height:34px; }
.grfybut{ color:#333; display:block; border-radius:5px; height:32px; line-height:32px; text-align:center; border:1px solid #999;}

.hidelevel .alertinfo h2.scicon{ padding-left:56px;}
.scicon span{ display:inline-block; height:34px; width:34px; margin-left:-45px; float:left;   border-radius:18px; border:1px solid #fff;}
.scicon span.starticon{ background-position:-7px -117px; }
.starticon{ background-image:url(../images/start07.png); background-repeat:no-repeat;}