/* 
* Name :  Leo.css
* Owner:  Leo
* Start:  2018/07/31
* Reamrk: Chrome + Firefox + 1920*1080
 */

/* css 默认样式重置 */

html,body{height: 100%;}

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}
   
ol,li,ul{margin:0; padding:0;list-style: none;}

button{outline:none;border:none;padding:0;cursor:pointer; vertical-align: top;}

a{cursor:pointer;text-decoration: none;	color: unset;}

a:focus {outline: none;} 

input , textarea{outline:none;vertical-align: top;}

input::-ms-clear, ::-ms-reveal{	display: none;}

textarea{resize: none;}

table{border-collapse: collapse;font-size: 14px;padding:0;margin:0;width: 100%;}

table td , table th{padding:0;}

img{border: none;}

*{box-sizing: border-box;}

body{font-family: "Arial","Microsoft YaHei","微软雅黑",sans-serif;font-size: 14px;}

*:focus{outline: none;}


/* 分列  - Start -----------------------------------------------------------S*/
.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12{float: left;}
.col1{	width:8.33%;}
.col2{	width:16.67%;}
.col3{	width:25%;}
.col4{	width:33.33%;}
.col5{	width:41.67%;}
.col6{	width:50%;}
.col7{	width:58.33%;}
.col8{	width:66.67%;}
.col9{	width:75%;}
.col10{	width:83.33%;}
.col11{	width:91.67%;}
.col12{	width:100%;}

.col01, .col02, .col03, .col04, .col05, .col06, .col07, .col08, .col09, .col00{float: left;}
.col01{	width:10%;}
.col02{	width:20%;}
.col03{	width:40%;}
.col04{	width:40%;}
.col05{	width:50%;}
.col06{	width:60%;}
.col07{	width:70%;}
.col08{	width:80%;}
.col09{	width:90%;}
.col00{	width:100%;}
/* 分列  - End -----------------------------------------------------------E*/


/* 自定义通用、便捷 - Start -----------------------------------------------------------S*/
.ccf:after{content: "";display: block;clear: both;height: 0;line-height: 0;}

/* 自定义通用、便捷 - End -----------------------------------------------------------E*/


/* font icon - Start -----------------------------------------------------------------S*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot');
  src:  url('../fonts/icomoon.eot') format('embedded-opentype'),
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.woff') format('woff'),
    url('https://show.17sucai.com/preview/1266961/2018-09-25/LeoJS/fonts/icomoon.svg?8li2ai') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-time:before {
  content: "\e8b5";
}
.icon-add:before {
  content: "\e145";
}
.icon-refresh:before {
  content: "\e863";
}
.icon-edit:before {
  content: "\e22b";
}
.icon-night:before {
  content: "\e3a8";
}
.icon-sun:before {
  content: "\e1ad";
}
.icon-phone:before {
  content: "\e0cd";
}
.icon-check:before {
  content: "\e5ca";
}
.icon-close:before {
  content: "\e5cd";
}
.icon-code:before {
  content: "\e86f";
}
.icon-colors:before {
  content: "\e40a";
}
.icon-color:before {
  content: "\e3b8";
}
.icon-date:before {
  content: "\e916";
}
.icon-pc:before {
  content: "\e30c";
}
.icon-favorite:before {
  content: "\e87d";
}
.icon-favorite_empty:before {
  content: "\e87e";
}
.icon-first_page:before {
  content: "\e5dc";
}
.icon-arrow_down:before {
  content: "\e313";
}
.icon-arrow_left:before {
  content: "\e314";
}
.icon-arrow_right:before {
  content: "\e315";
}
.icon-arrow_up:before {
  content: "\e316";
}
.icon-capslock:before {
  content: "\e318";
}
.icon-last_page:before {
  content: "\e5dd";
}
.icon-person:before {
  content: "\e7fd";
}
.icon-power:before {
  content: "\e8ac";
}
.icon-remove:before {
  content: "\e15b";
}
.icon-search:before {
  content: "\e8b6";
}
.icon-sad:before {
  content: "\e811";
}
.icon-neutral:before {
  content: "\e812";
}
.icon-fun:before {
  content: "\e813";
}
.icon-mobile:before {
  content: "\e0d6";
}
.icon-star_empty:before {
  content: "\e83a";
}
.icon-star_half:before {
  content: "\e839";
}
.icon-pad:before {
  content: "\e331";
}
.icon-thumb_down:before {
  content: "\e8db";
}
.icon-thumb_up:before {
  content: "\e8dc";
}
/* font icon - End -------------------------------------------------------------------E*/



/* scroll - Start -----------------------------------------------------------------S*/
.scroll{
	height: 100%;
	position: relative;
}
.scroll>.scroll-con{
	height: 100%;
	overflow: hidden;
}
.scroll-bar{
	position: absolute;
	right: 2px;
	width: 8px;
	border-radius: 4px;
	background: rgba(255,255,255,0.1);
}
.scroll-bar:hover{
	background: rgba(255,255,255,0.2);
}
.scroll-bar.active{
	background: rgba(255,255,255,0.3);
}

/* scroll - End -------------------------------------------------------------------E*/



/* table - Start -----------------------------------------------------------------S*/
table{
	color: #ccc
}
table.widauto{
	width: unset;
}
table tr{
	height: 40px;
	line-height: 40px;
}
table td{
	padding: 0 14px;
}

/* .border线框, .berder-bottom底线边框, .odd-even 奇偶分行  */
table.border td , table.border th{
	border:solid 1px #555;
}

table.odd-even thead tr{
	background: rgba(255, 255, 255, 0.1);
}
table.odd-even tbody tr:nth-child(2n+1){	
}
table.odd-even tbody tr:nth-child(2n){
	background: rgba(170, 170, 170, 0.1);
}

table.border-bottom thead tr{
	background: rgba(255, 255, 255, 0.1);
}
table.border-bottom tbody tr{
	border-bottom: solid 1px #555;
}

.paging{
	height: 100%;
	padding: 0 25px 60px 25px;
}
.paging .scroll-bar , .select .scroll-bar{
	width: 6px;
}

.table-foot
{
	position: absolute;
	width: 100%;
	height: 60px;
	bottom: 0;	
	left: 0;
	padding: 13px 20px;
}
.table-foot>.size , .table-foot>.number{	
	height: 34px;
}
.table-foot>.size{
	width: 40%;
}
.table-foot>.number{
	width: 60%;
}
.table-foot>.size{
	float: left;
	line-height: 34px;
}
.table-foot>.size>span{
	margin-right:20px; 
}
.table-foot>.number{
	float: right;
	padding: 1px 0;
	text-align: right;
}
.table-foot>.number>a{
	width: 32px;
	height: 32px;
	display: inline-block;
	margin-left: 8px;
	text-align: center;
	line-height: 30px;
	vertical-align: top;
}
.table-foot>.number>.a-prev , .table-foot>.number>.a-next , .table-foot>.number>.a-num{
	
	border: solid 1px #5a6882;
	background: rgba(255,255,255,0.05);	
}
.table-foot>.number>.a-num.active{
	background: #21a6df;
	border-color: #21a6df;
	color: #fff;
}

.table-foot .ps{
	display: inline-block;
	height: 34px;
	width: 54px;
	background: rgba(255,255,255,0.05);
	border: solid 1px #5a6882; 
	border-radius: 1px;
	margin-left: 7px;
	text-align: center;
	position: relative;	
}
.table-foot .ps:after{
	content: "";
	border-bottom: solid 4px #e5e5e5;
	border-left: solid 4px transparent;
	border-right: solid 4px transparent;
	margin-left: 4px;
	display: inline-block;
	vertical-align: top;
	margin-top: 15px;
}
.table-foot .ps ul{
	display: none;
	position: absolute;
	width: 54px;
	left: -1px;
	top: -97px;
	background: #323955;
	border: solid 1px #5a6882;
	padding: 1px;
}
.table-foot .ps ul li{
	line-height: 30px;
}
.table-foot .ps ul li.active{
	background: #21a6df;
}
.table-foot .a-prev,.table-foot .a-next{
	position: relative;
}
.table-foot .a-prev:before, .table-foot .a-prev:after, .table-foot .a-next:before , .table-foot .a-next:after{
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: solid 1px #aaa;
	border-left: solid 1px #aaa;
	position: absolute;
	top: 10px;
}
.table-foot .a-prev:before, .table-foot .a-prev:after{
	transform: rotate(-45deg);
}
.table-foot .a-next:before , .table-foot .a-next:after{
	transform: rotate(135deg);
}
.table-foot .a-prev:before{
	left: 9px;
}
.table-foot .a-prev:after{
	left: 15px;
}
.table-foot .a-next:before{
	left: 6px;
}
.table-foot .a-next:after{
	left: 12px;
}

/* table - End -----------------------------------------------------------------E*/

/* form - Start -----------------------------------------------------------------S*/

.row{
	line-height: 34px;
	margin-bottom: 12px;
}
.row .key{
	width: 100px;
	float: left;
	padding-right: 18px;
	text-align: right;
}
.row .val{
	margin-left: 100px;
	padding-right: 80px;
}
.row .val.cib{
	font-size: 0;
}
.row:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
}
.row.small .key{
	width: 88px;
	padding-right: 12px;
}
.row.small .val{
	margin-left: 88px;
	padding-right: 10px;
}

/* input */
.row input , .row textarea{
	height: 34px;
	border: solid 1px #5a6882;
	width: 100%;
	background: transparent;
	color: #ddd;
	padding: 0 14px;
	font-family: "Arial","微软雅黑";
	font-size: 14px;
}
.row textarea{
	height: 100px;
	line-height: 30px;
}
.row input[disabled]{
	background: #424E65;
}
input[name='digit']{
	ime-mode:disabled;
}
.input-area:after{
	content: "";
	display: block;
	clear: both;
	line-height: 0;
}
.input-area .ia1 {
	padding-right: 20px;
	position: relative;
}
.input-area .ia1:after{
	content: "—";
	display: block;
	width: 40px;
	text-align: center;
	position: absolute;
	top: 0;
	right: -20px;
}
.input-area .ia2{
	padding-left: 20px;
}

.input-tag{
	position: relative;
}
.input-tag>.itag{
	display: block;
	width: 60px;
	height: 32px;
	position: absolute;
	background: #3c465a;
	top: 1px;
	text-align: center;
}
.input-tag.before>.itag{
	left: 1px;
}
.input-tag.after>.itag{
	right: 1px;
}
.input-tag.before input{
	padding-left: 72px;
}
.input-tag.after input{
	padding-right: 72px;
}

/* button */
.btn{
	display: inline-block;
	vertical-align: top;
	height: 32px;
	line-height: 32px;
	padding: 0 18px;
	letter-spacing: 1px;
	color: #ddd;
	transition: all 0.4s;
	position: relative;
	font-size: 14px;
}
.btn.bd{
	border: solid 1px #666;
	background: transparent;	
}
.btn.bd.blue{
	border-color: #21a6df;
}
.btn.bd.green{
	border-color: #449d44;
}
.btn.bd.yellow{
	border-color: #ec971f;
}
.btn.bd[disabled]{
	border-color: #666;
	color: #aaa;
}

.btn.bg{
	padding: 0 19px;
	background: #666;
}
.btn.bg.blue{
	background: #21a6df;
}
.btn.bg.green{
	background: #449d44;
}
.btn.bg.yellow{
	background: #ec971f;
}
.btn.bg[disabled]{
	background: #666;
	color: #aaa;
}

.btn:hover{
	color: #fff;
}
.btn[disabled]:hover{
	color: #aaa;
}

.btn.am
{
	overflow: hidden;	
}
.btn.am>span{
	position: relative;
	z-index: 2;
}
.btn.am:before{
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
}
.btn.am-rotate:before{	
	background: #21a6df;
	width: 120%;
	height: 110%;
	top: 0;
	left: 0;
	transform-origin: left bottom;
	transform: rotate(-90deg);
	transition: all 0.6s;	
	
}
.btn.am-rotate:hover:before{
	transform: rotate(0);
}
.btn.am-scale:before{
	background: #449d44;
	width: 0;
	height: 0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 1000px;
	opacity: 0;
	transition: all 0.6s;	
}
.btn.am-scale:hover:before{
	width: 120%;
	height: 200%;
	opacity: 1;
}

.btn.am-border{
	transition: all 0.8s;
}
.btn.am-border:hover{
	border:solid 1px #ec971f;
}
.btn.am-border:after{
	content: '';
	display: block;
	position: absolute;	
}
.btn.am-border:before, .btn.am-border:after{
	width: 0;
	height: 0;
	border: solid 1px transparent;
	z-index: 3;
	box-sizing: border-box;
}
.btn.am-border:before{
	top:0;
	left: 0;
	transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
}
.btn.am-border:after{
	right: 0;
	bottom: 0;
	transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in;
}
.btn.am-border:hover:before{
	border-top-color: #ec971f;
	border-right-color: #ec971f;
	width: 100%;
	height: 100%;
	transition: border-color 0s ease-out 0s, width 0.2s ease-out 0s, height 0.2s ease-out 0.2s;
}
.btn.am-border:hover:after{
	border-bottom-color: #ec971f;
	border-left-color: #ec971f;
	width: 100%;
	height: 100%;
	transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}


/* checkbox 显示区域14*14 实际操作区域18*18 */
.checkbox{
	display: inline-block;
	vertical-align: top;
	width: 18px;
	height: 18px;
	border: solid 2px transparent;
	box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
	color: #ccc;
	margin-right: 4px;
	position: relative;

}
a.checkbox:hover , a.checkbox.checked{
	color: #00c6ff;
}
a.checkbox.checked:before{
	content: "";
	display: block;
	position: absolute;
	width: 4px;
	height: 7px;
	border-bottom: solid 2px;
	border-right: solid 2px;
	transform: rotate(40deg);
    left: 4px;
    top: 1px
}
.checkbox-group .checkbox{
	margin-left:20px;
	margin-right:4px;
	user-select:none;
}
.checkbox-group .checkbox:first-child{
	margin-left:0;
}


.radio-group .radio{
	margin-left:20px;
	margin-right:4px;
	user-select:none;
}
.radio-group .radio:first-child{
	margin-left:0;
}
a.radio{
	display: inline-block;
	vertical-align: top;
	width: 18px;
	height: 18px;
	border: solid 1px transparent;
	box-shadow: inset 0 1px, inset 1px 0, inset -1px 0, inset 0 -1px;
	border-radius:16px;	
	color:#ccc;
	padding: 4px;
}
a.radio:hover,a.radio.checked{
	color:#00c6ff;
}
a.radio.checked:before{
	content:"";
	display:block;
	border:solid 4px;
	border-radius:4px;	
}
.row .checkbox , .row .radio{
	margin-top: 8px;
}

.switch{
	width: 100px;
	height: 34px;
	border: solid 1px #5a6882;
	border-radius: 3px;
	font-size: 0;
	position: relative;
	overflow: hidden;
}
.switch>span{
	font-size: 14px;
	display: inline-block;
	width: 50%;
	line-height: 32px;	
	text-align: center;
	cursor: pointer;
	position: relative;
	z-index: 10;
}
.switch:after{
	content: "";
	display: block;
	width: 50%;
	height: 32px;
	background: #21a6df;
	position: absolute;
	z-index: 9;
	top: 0;
	left: 0;
	transition: all 0.4s;
}
.switch.on:after{
	left: 0;
}
.switch.off:after{
	left: 50%;
}

/* select */
.select{
	position: relative;
}
.select>.sel-list{
	position: absolute;
	left: 0;
	top: 36px;
	width: 100%;	
	background:#191F28;
	border:solid 1px #5A6882;
	height: auto;
    z-index: 99;
    display: none;
}
.select ul{
	display: block;
	padding: 2px;
	height: auto;
	overflow: hidden;
	max-height: 166px;
}
.select>.sel-list li{
	display: block;
	line-height: 30px;
	margin: 1px 0;
	padding: 0 14px;
}
.select>.sel-list li:hover{
	background: rgba(255,255,255,0.1);
}
.select>.sel-list li.active{
	color: #00c6ff;
}
.select:before,.select:after{
	content: "";
	position: absolute;
	pointer-events: none;
}
.select:before{
	top: 1px;
	bottom: 1px;
	right: 33px;
	border-left: solid 1px #5a6882;
}
.select:after{
	border-top: solid 6px #fff;
    border-left: solid 7px transparent;
    border-right: solid 7px transparent;
    top: 16px;
    right: 10px;
}
.select input{
	padding-right: 44px;
}



/* datetime */
.date-sel{
	position:relative;	
}

.date{
	position:absolute;
	background:#191F28;
	border:solid 1px #5A6882;
	width:254px;
    left: 0;
    top: 36px;
	font-size:14px;	
	z-index:99;
}
.ar .date{
	left:unset;
	right:0;
}
.date:focus{
	border:solid 1px #5A6882;
	outline: none;
}

.ym{
	height:32px;
	line-height:32px;
	border-left:solid 70px transparent;
	border-right:solid 70px transparent;
}

.ym-left , .ym-right{
	width:70px;
	height: 32px;
}
.ym-left{
	float:left;
	margin-left:-70px;
}
.ym-right{
	float:right;
	margin-right:-70px;
	text-align:right;
}
.ym-center{
	text-align:center;
	font-size:17px;
}
.ym-left>a , .ym-right>a{
	width:20px;	
	display:inline-block;
	color:#e5e5e5;
}
.ym-left>a{
	margin-left:5px;
}
.ym-right>a{
	margin-right:5px;
}
.ym-left>a:before , .ym-right>a:before{
	content:"";
	display:block;	
	box-sizing:border-box;
}
.year-prev , .year-next{
	padding:11px 5px;
}
.year-prev:before,.year-next:before{
	width:10px;
	height:10px;
	border-left:double 4px;
	border-bottom:double 4px;	   
}
.month-prev , .month-next{
	padding:12px 6px;
}
.month-prev:before,.month-next:before{
	width:8px;
	height:8px;
	border-left:solid 1px;
	border-bottom:double 1px;
}
.ym-left>a:before{
	 transform: rotate(45deg);
}
.ym-right>a:before{
	transform: rotate(-135deg);
}
.ym-left>a:hover , .ym-right>a:hover{
	color:#21a6df;
}
.ym-center>a,.ym-center>span{
	display:inline-block;
	padding:0 6px;
}
.week{
	height:24px;
	padding:0 10px;
	background:rgba(255,255,255,0.1);
}
.week>span{
	width:28px;
	line-height:24px;
	text-align:center;
	display:inline-block;
	vertical-align:top;
	margin-left:6px;
	color:#ccc;
	text-align:center;	
}
.week>span:first-child{
	margin-left:0;
}
.day{
	padding:10px 10px 4px 4px;
}
.day:after{
	content:"";
	display:block;
	lien-height:0;
	clear:both;
}
.day>a{
	width:28px;
	height:28px;
	margin-left:6px;
	margin-bottom:6px;
	border-radius:14px;
	display:inline-block;
	vertical-align:top;
	text-align:center;
	line-height:28px;
	color:#e5e5e5;
}
.day>a:hover{
	background:rgba(255,255,255,0.1);
}
.day>a.active{
	background:#21a6df;
	color:#fff;
}
.day.fir1>a:first-child{
	margin-left:6px;
}
.day.fir2>a:first-child{
	margin-left:40px;
}
.day.fir3>a:first-child{
	margin-left:74px;
}
.day.fir4>a:first-child{
	margin-left:108px;
}
.day.fir5>a:first-child{
	margin-left:142px;
}
.day.fir6>a:first-child{
	margin-left:176px;
}
.day.fir0>a:first-child{
	margin-left:210px;
}


/* form input color */
.date-sel:before{
	content:"";
	display:block;
	width:33px;
	height:32px;
	border-left:solid 1px #5a6882;
	position:absolute;
	background:url("../image/icon/date.png") center center no-repeat;
	padding:8px 9px;
	right:1px;
	top:1px;
	box-sizing:border-box;
}
.date-sel input{
	padding-right:45px;
}


/* 日期范围 */
.date.range{
	width:514px;
	font-size:0;
}
.date-start , .date-end{
	width:252px;
	display:inline-block;
	vertical-align:top;
	font-size:14px;
}
.date-start
{
	margin-right:8px;
}
.date-split{
	width: 8px;
    height: 100%;
    border-left: solid 1px #5a6882;
    border-right: solid 1px #5a6882;
    background: #2c4165;
    position: absolute;
    top: 0;
    left: 252px;
}

/* 时分选择 */
.date.range
{
	width:366px;
}
.Hm{
	width:100px;
	height:80px;
	position:absolute;
	top:50%;
	left:0;
	margin-top:-40px;
}

/* form - End -----------------------------------------------------------------E*/

/* img-show */
.img-list{
	font-size: 0;
}
.img-list>a{
	width: 122px;
	height: 122px;
	border: solid 1px #5a6882;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	position: relative;
}
.img-list>a>img{
	max-height: 120px;
	max-width: 120px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.img-show{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 101;
}
.img-show>.img-box{
	position: absolute;
	transform: translate(-50%,-50%) scale(0.1);	
	transition: all 0.6s;
	opacity: 0;
	line-height: 0;
}
.img-show.show .img-box{
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%,-50%) scale(1);
	opacity: 1;
}

.img-show>.img-box>img{
	max-width: 1200px;
	max-height: 700px;
}
.img-show>.img-box>i{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
.img-show>.img-box:before , .img-show>.img-box:after , .img-show>.img-box>i:before , .img-show>.img-box>i:after {
	content: "";
	position: absolute;
	display: block;
	width: 10px;
	height: 10px;	
}
.img-show>.img-box:before , .img-show>.img-box:after{
	top: -2px;
	border-top: solid 2px #21a6df;
	border-bottom: solid 2px transparent;	
}
.img-show>.img-box>i:before , .img-show>.img-box>i:after{
	bottom: -2px;
	border-top: solid 2px transparent;
	border-bottom: solid 2px #21a6df;
}

.img-show>.img-box:before , .img-show>.img-box>i:before{
	border-left: solid 2px #21a6df;
	border-right: solid 2px transparent;
	left: -2px;
}
.img-show>.img-box:after , .img-show>.img-box>i:after{
	border-right: solid 2px #21a6df;
	border-left: solid 2px transparent;
	right: -2px;
}
.img-close{
	width: 60px;
	height: 60px;
	position: absolute;
	top: 20px;
	right: 20px;
	text-align: center;
	line-height: 60px;
    font-size: 54px;
    color: #aaa;
    opacity: 0;
    transition: all 0.5s;
}

.img-close:hover{
	color: #fff;
}
.dot-box{
	position: absolute;
	display: inline-block;
	left: 50%;
	bottom: -60px;
	transform: translateX(-50%);
}
.dot-box>a{
	display: inline-block;
	height: 20px;
	width: 20px;
	border-radius: 20px;
	margin-left: 20px;
	background: #aaa;
}
.dot-box>a:first-child{
	margin-left: 0;
}
.dot-box>a.active{
	background: #21a6df;
}

.img-ope{
	position: absolute;
	display: block;
	width: 80px;
	height: 100px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 72px;
	line-height: 100px;
	color: #aaa;
	opacity: 0;
	transition: all 0.3s;
}
.img-ope.prev{
	left: 0;
}
.img-ope.next{
	right: 0;
}
.img-ope:hover{
	color: #fff;
	transform: translateY(-50%) scale(1.2);
}

.img-show.show .img-close , .img-show.show .img-ope{
	opacity: 1;
}


body:after{
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	bottom: 100%;
	right: 100%;	
	background: rgba(0,0,0,0);
	z-index: 100;
	transition: all 0.5s;
}
body.readonly:after{
	bottom: 0;
	right: 0;
	background: rgba(0,0,0,0.3);
}
.popup{
	position: absolute;
	left: 50%;
	top: 50%;
	background: #181f29;
	z-index: 101;
	border-radius: 5px;
	box-shadow: 0 0 3px 3px rgba(0,0,0,0.1);
	display: block;
	opacity: 0;
	transform: translate(-50%, -60%) scale(0.5);
	transition: all 0.5s ease-in-out;
}
.popup-title{
	height: 50px;
	line-height: 50px;
	border-bottom: solid 1px #000;
	padding-left: 14px;
}
.popup-close{
	width: 20px;
	height: 20px;
	display: block;
	float: right;
	margin: 15px;
	position: relative;
}
.popup-close:before,.popup-close:after{
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 18px;
	border-left: solid 2px #ccc;
	top: 1px;
	left: 9px;
}
.popup-close:before{
	transform: rotate(45deg);
}
.popup-close:after{
	transform: rotate(-45deg);
}
.popup-body{
	width: 750px;
	height: 480px;
	overflow: hidden;
}
.min .popup-body{
	width: 500px;
	height: 350px;
}
.max .popup-body{
	width: 1000px;
	height: 750px;
}

.popup.show{
	opacity: 1;
	transform: translate(-50%, -60%) scale(1);	
}

/* alert */
.alert{
	position: absolute;
	width: 360px;
	left: 50%;
	top: 50%;
	z-index: 101;
	opacity: 0;
	transform: translate(-50%, -86%) scale(0.5);
	transition: all 0.5s ease-in-out;
}
.alert>i{
	display: block;
	position: absolute;
	height: 0;
	width: 100%;
	left: 0;
	bottom: 0;
}
.alert:before , .alert:after , .alert>i:before , .alert>i:after {
	content: "";
	position: absolute;
	display: block;
	width: 6px;
	height: 6px;	
}
.alert:before , .alert:after{
	top: 0;
	border-top: solid 2px #21a6df;
	border-bottom: solid 2px transparent;	
}
.alert:before , .alert>i:before{
	border-left: solid 2px #21a6df;
	border-right: solid 2px transparent;
	left: 0;
}
.alert:after , .alert>i:after{
	border-right: solid 2px #21a6df;
	border-left: solid 2px transparent;
	right: 0;
}
.alert>i:before , .alert>i:after{
	bottom: 0;
	border-top: solid 2px transparent;
	border-bottom: solid 2px #21a6df;
}

.alert .alert-box{
	border: solid 1px #5e636a;
	background: rgba(24,31,41,0.8);
}
.alert .alert-title{
	height: 38px;
	line-height: 38px;
	border-bottom: solid 1px #464c54;
	margin: 0 9px;
	text-align: center;
	color: #fff;
}
.alert .alert-body{	
	padding: 20px;
}
.alert .alert-con{
	max-height: 200px;
	line-height: 34px;
	text-align: center;
	font-size: 16px;
}
.alert .alert-foot{
	height: 55px;
	text-align: center;
	padding-top: 5px;
}
.alert .alert-foot .alert-cancle{
	margin-left: 30px;
}
.alert.show{
	opacity: 1;
	transform: translate(-50%, -86%) scale(1);	
}