﻿
/*图标状态提示
窗口居中显示
需要自动关闭
使用场景：1、数据提交时显示加载中
          2、处理成功后显示处理结果
*/
.float{width:120px;height:40px;position:fixed;top:35%;left:50%;margin-left:-60px;background-color:#5e5e5e;
       opacity: 0.8; -moz-opacity: 0.8; filter: alpha(opacity=8);
       border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;
       text-align:center;padding:80px 0px 0px 0px;color:#fff;font-size:16px;
       background-position:center 22px;background-repeat:no-repeat;
       z-index:9999;}
.float.loading{background-image:url(../images/loading3.gif);}/*数据处理中，带加载图标消息提示，处理完成执行关闭*/
.float.true{background-image:url(../images/float_ok.png);}/*处理成功，带勾的消息提示*/
/*.float.false{} 错误时用messagebox弹出提示*/

/*文字消息提示
窗口居中显示
需要自动关闭
使用场景：处理或验证失败的文字提示
*/
.messagebox{width:100%;position:fixed;left:0px;top:35%;text-align:center;z-index:9999;}
.messagebox .msg{display:inline-block;background:url(../images/opacity75.png);overflow:hidden;
    border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;line-height:20px;
    text-align:center;padding:10px 20px 10px 20px;color:#fff;font-size:16px;
}
.messagebox .msg a{color:#f2ed05;}

/*弹窗消息，带确定按钮*/
.alertbox{position:fixed;z-index:9999;width:100%;height:100%;background:url(../images/opacity30.png);top:0px;left:0px;}
.alertbox .boxpnl{position:absolute;z-index:99999;width:300px;left:50%;top:30%;margin-left:-150px;
                  background-color:#fff;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
.alertbox .boxpnl .msg{padding:20px 20px 20px 20px;font-size:14px;color:#888;line-height:22px;text-align:left;border-bottom:solid 1px #e8e8ea;}
.alertbox .boxpnl .msg a{color:#0067cd;}
.alertbox .boxpnl .btn{height:40px;display:block;line-height:40px;text-align:center;
                       font-size:16px;color:#0bb20c;overflow:hidden;}
.alertbox .boxpnl .btn:hover{background-color:#f0f0f0;}
/*弹窗消息，带确定和取消按钮*/
.alertbox.confirmbox{}
.alertbox.confirmbox .btn{width:150px;float:left;}
.alertbox.confirmbox .btn.cancel{width:149px;color:#353535;border-left:solid 1px #e8e8ea;}

/*end浮动层-------------------------------------*/


/*表单*/
.form{line-height:30px;}
.form .item{clear:both;}
.form .key{    vertical-align: middle;
    margin-right: 4px;
}
.form label em {
    display: inline-block;
    font-style: normal;color:#C3D4E8;cursor:Pointer;

}
.form .val{float:left;padding:5px 5px 5px 5px;}
.form .txt{width:260px;height:32px;line-height:32px;border:solid 1px #ccc;padding:0px 3px 0px 13px;margin:0px;
           font-size:14px;font-family:'Microsoft YaHei',Arial;
           border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form .txtarea{width:260px;height:28px;line-height:28px;border:solid 1px #ccc;padding:0px 3px 0px 13px;margin:0px;
           font-size:14px;font-family:'Microsoft YaHei',Arial;
           border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}


.form .txtarea:focus{border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);}
  
.form .txt:focus{border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);}

.form select{padding:5px 3px 5px 3px;
            border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border:solid 1px #ccc;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.form select:focus{border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);}

/*按钮*/
a.button{display:inline-block;height:32px;line-height:32px;width:100%;background-color:#37649f;color:#fff;font-size:16px;
         border:solid 1px #dedede;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;text-align:center;}
a.button.red{border:solid 1px #990100;background-color:#990100;}
a.button.orange{border:solid 1px #de4949;background-color:#ff6600;}
a.button.blue{border:solid 1px #01A1EB;background-color:#01A1EB;}
a.button.green{border:solid 1px #04b102;background-color:#24b707;}
a.button.grey{border:solid 1px #dedede;background-color:#efefef;color:#666;}


/* 浮动*/
.floatR{position:fixed;top:35%;right:20px;z-index:10000;}
.floatR p{ cursor:pointer;margin-bottom:3px;}
.floatR p a{display:block;position:relative;}
.floatR p a span{display:block;width:70px;height:70px;}
.floatR p a b{position:absolute;top:0;right:71px;display:none;}
.floatR p a b.lx{display:none;/* background:url(../images/lx.png) left center no-repeat;width:165px;height:48px;color:#fff;font:14px/48px 微软雅黑;padding-left:10px;top:9px; */}


.kefu1{
	width:70px;
	height:70px;
	background: url(../images/kefu.png) 0px 0px no-repeat;
}
.kefu1:hover{
	background: url(../images/kefu.png) -100px 0px no-repeat;
}
.kefu2{
	width:70px;
	height:70px;
	background: url(../images/kefu.png) 0px -72px no-repeat;
}
.kefu2:hover{
	background: url(../images/kefu.png) -100px -72px no-repeat;
}
.kefu3{
	width:70px;
	height:70px;
	background: url(../images/kefu.png) 0px -144px no-repeat;
}
.kefu3:hover{
	background: url(../images/kefu.png) -100px -144px no-repeat;
}
.kefu4{
	width:70px;
	height:70px;
	background: url(../images/kefu.png) 0px -216px no-repeat;
}
.kefu4:hover{
	background: url(../images/kefu.png) -100px -216px no-repeat;
}
.kefu5{
	width:70px;
	height:70px;
	background: url(../images/kefu.png) 0px -288px no-repeat;
}
.kefu5:hover{
	background: url(../images/kefu.png) -100px -288px no-repeat;
}

.friendlink{
       position: absolute;
       left: 50%;
       bottom:0px;
       width: 1160px;
       margin-left: -560px;
       font-size: 14px;
       line-height: 40px;
       color: #fff;
      }
      .friendlink a{
        color: #01A1EB;
        margin-right: 18px;
      }
    .animamask{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background: rgba(0,0,0,.6);
    display: none;
}
.animamask .img{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 540px;
    height: 300px;
    margin-left: -270px;
    margin-top: -150px;
    transform: translateY(-500px) scale(0);
}
.animamask.active{
    display: block;
}
.animamask.active .img{
    animation: upfadein 2s ease-in forwards,sake 3s 2s linear;
}
.animamask .img img{
    display: block;
    width: 100%;
}
.animamask a{
    display: block;
    position: absolute;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.animamask span{
    display: block;
    position: absolute;
    top: -64px;right: -64px;
    z-index: 2;
    width: 44px;
    height: 44px;
}
    @keyframes upfadein{
      0%{ transform: translateY(-500px) scale(0); }
      100%{transform: translateY(0px) scale(1);}
    }
    @keyframes sake{
      0%{ transform: translateY(0px);}
      20%{transform: translateY(-15px);}
      40%{transform: translateY(5px);}
      60%{transform: translateY(-10px);}
      80%{transform: translateY(3px);}
      100%{transform: translateY(0px);}
    }