/*首页*/
.IN{width:100%;height:100%;background-color:#eee;padding:0px 0px 0px 200px;}
.IN-nav{position:fixed;width:200px;background-color:#FFF;height:100%;left:0px;top:0px;}
.IN-nav ul{width:100%;padding:20px 0px;overflow-x:hidden;overflow-y:auto;height:100%;}
.IN-nav li{padding:2px 10px;}
.IN-nav li p{color:#333;height:28px;line-height:28px;padding:0px 10px;transition:all .3s;-webkit-transition:all .3s;border-radius:4px;}
.IN-nav li p:hover{background-color:#EEE;color:#337ab7;cursor:pointer;}
.IN-nav li.act p{background-color:#337ab7;color:#fff;cursor:pointer;}
.IN-iframe{width:100%;height:100%;overflow:hidden;}
.IN-iframe iframe{width:100%;height:100%;}


/*内页*/
.VIEW{width:1000px;margin:0 auto;padding:10px 0px 30px;}
.VIEW-list{width:100%;background-color:#fff;padding:20px;border-radius:4px;margin-top:20px;user-select:text;}
.VIEW-title{height:40px;line-height:40px;text-align:left;border-bottom:1px dashed #DDD;color:#337ab7}
.VIEW table{width:100%;text-align:left;user-select:text;border-collapse:collapse;margin-top:20px;color:#666;}
.VIEW thead{background-color:#f0f0f0;}
.VIEW th,.VIEW td{padding:8px;word-break:break-all;border:1px solid #DDD;font-weight:normal;}
.VIEW-btn{
	padding:6px 15px;
	background-color:#337ab7;
	color:#FFF;
	margin:0px 3px;
	cursor:pointer;
	border-radius:2px;
	transition:all .4s;
	-webkit-transition:all .4s;
}
.VIEW-btn:hover{opacity:0.8;}
.VIEW-btn:active{opacity:1;}


/*代码*/
.VIEW-tip{background-color:#F1F5F1;border:1px solid #E3ECE3;margin-top:20px;color:#73a075;padding:20px;user-select:text;border-radius:4px;}
.VIEW-tip p{line-height:1.5;}
.VIEW-tip .p20{padding-left:20px;}
.VIEW-tip .p40{padding-left:40px;}
.VIEW-tip .p60{padding-left:60px;}
.VIEW-tip .p80{padding-left:80px;}
.VIEW-tip .p100{padding-left:100px;}



.VIEW-tip{background-color:#1f1f1f;padding:20px 20px 20px 46px;counter-reset: div-counter;border-radius:4px;margin:10px 0px;}
.VIEW-tip p{color:#ccc;font-size:14px;line-height:20px;padding:0px;margin:0px;font-family: "Courier New",Consolas,"Lucida Console",monospace;position:relative;}
.VIEW-tip > p::before {
  counter-increment: div-counter;
  content: counter(div-counter);
  position:absolute;
  top:0px;
  right:calc(100% + 15px);
  color:#8c8c8c;
  font-size:12px;
  line-height:20px;
}

.VIEW-tip .p20{padding-left:20px;}
.VIEW-tip .p40{padding-left:40px;}
.VIEW-tip .p60{padding-left:60px;}
.VIEW-tip .p80{padding-left:80px;}
.VIEW-tip .p100{padding-left:100px;}


/*css*/
.CS-color{margin-top:20px;display:flex;flex-wrap:wrap;}
.CS-color li{width:106px;padding:5px;}
.CS-color li .p1{height:50px;border:1px solid #eee;border-radius:2px;}
.CS-color li .p2{margin-top:1px;}
.CS-color li .p2 input{width:100%;height:28px;border:1px solid #eee;border-radius:2px;text-align:center;font-size:12px;color:#666;}
.CS-color li .p3{text-align:center;font-size:12px;line-height:20px;margin-top:1px;}
.CS-shadow{margin-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;}
.CS-shadow li{width:46%;padding:5px;}
.CS-shadow li .p1{height:50px;border:1px solid #eee;border-radius:2px;margin-bottom:30px;}
.CS-shadow li .p2 input{width:100%;height:28px;border:1px solid #eee;border-radius:2px;text-align:center;font-size:12px;color:#666;}
.CS-shadow li .p3{margin-bottom:50px;}
.CS-shadow li .p3 input{width:100%;height:28px;border:1px solid #eee;border-radius:2px;text-align:center;font-size:12px;color:#666;}
.CS-hand{margin-top:20px;display:flex;}
.CS-btn{
	padding:6px 15px;
	background-color:#337ab7;
	color:#FFF;
	margin:0px 3px;
	cursor:pointer;
	border-radius:2px;
	transition:all .4s;
	-webkit-transition:all .4s;
}
.CS-btn:hover{opacity:0.8;}
.CS-btn:active{opacity:1;}
.CS-anim-1{width:400px;height:400px;background-color:#f00;position:fixed;z-index:100;top:50%;left:50%;margin:-200px 0px 0px -200px;}
.CS-anim-2{width:400px;height:400px;background-color:#f00;position:fixed;z-index:100;top:50%;left:50%;margin:-200px 0px 0px -200px;}
.CS-anim-3{width:400px;height:400px;background-color:#f00;position:fixed;z-index:100;left:50%;margin:0px 0px 0px -200px;}
.CS-anim-4{width:400px;height:400px;background-color:#f00;position:fixed;z-index:100;left:50%;margin:0px 0px 0px -200px;}
.CS-anim-5{width:400px;height:400px;background-color:#f00;position:fixed;z-index:100;top:50%;left:50%;margin:-200px 0px 0px -200px;}
.CS-anim-6{width:400px;height:400px;background-color:#f00;position:fixed;z-index:100;top:50%;left:50%;margin:-200px 0px 0px -200px;}
.CS-anim-7{width:400px;height:400px;background-color:#f00;position:fixed;z-index:100;top:50%;left:50%;margin:-200px 0px 0px -200px;}


/*输入框*/
.VIEW-04-for{margin-top:20px;display:flex;}
.VIEW-04-a{height:32px;width:100px;}
.VIEW-04-b{height:32px;width:100px;margin-left:10px;}
.VIEW-04-c{height:32px;width:100px;margin-left:10px;}
.VIEW-04-d{height:32px;width:100px;margin-left:10px;}


/*加载遮罩*/
.VIEW-05-for{margin-top:20px;display:flex;}


/*滑块*/
.VIEW-08-for{margin-top:20px;display:flex;}
.VIEW-08-a{display:flex;align-items:center;justify-content:space-between;height:32px;width:600px;}
.VIEW-08-a-div{display:flex;align-items:center;height:32px;}
.VIEW-08-a-input{height:32px;border:1px solid #DDD;width:100px;border-radius:4px;text-align:center;transition:all .3s;-webkit-transition:all .3s;}
.VIEW-08-a-input:hover{border-color:#1D7BFF;}
.VIEW-08-a-input:focus{border-color:#1D7BFF;}
.VIEW-08-b{display:flex;align-items:center;justify-content:space-between;height:32px;width:600px;}
.VIEW-08-b-div{display:flex;align-items:center;height:32px;}
.VIEW-08-b-input{height:32px;border:1px solid #DDD;width:100px;border-radius:4px;text-align:center;transition:all .3s;-webkit-transition:all .3s;}
.VIEW-08-b-input:hover{border-color:#1D7BFF;}
.VIEW-08-b-input:focus{border-color:#1D7BFF;}
.VIEW-08-c{display:flex;align-items:center;justify-content:space-between;height:32px;width:600px;}
.VIEW-08-c-div{display:flex;align-items:center;height:32px;}
.VIEW-08-c-input{height:32px;border:1px solid #DDD;width:100px;border-radius:4px;text-align:center;transition:all .3s;-webkit-transition:all .3s;}
.VIEW-08-c-input:hover{border-color:#1D7BFF;}
.VIEW-08-c-input:focus{border-color:#1D7BFF;}


/*弹出提示*/
.VIEW-09-for{margin-top:20px;display:flex;}
/*移入提示*/
.VIEW-10-for{margin-top:20px;display:flex;}
/*弹窗提示*/
.VIEW-11-for{margin-top:20px;display:flex;}
/*气泡提示*/
.VIEW-12-for{margin-top:20px;display:flex;}
/*开关*/
.VIEW-13-for{margin-top:20px;display:flex;}
/*下拉框*/
.VIEW-14-for{margin-top:20px;display:flex;}


/*日期时间*/
.VIEW-15-for{margin-top:20px;display:flex;align-items:center;}
.VIEW-15-for p{display:flex;align-items:center;margin-right:20px;}
.VIEW-15-for p span{font-size:14px;width:65px;}
.VIEW-15-for p input{border:1px solid #DDD;width:175px;height:32px;font-size:14px;padding:0px 8px;border-radius:2px;transition:all .3s;-webkit-transition:all .3s;}
.VIEW-15-for p input:hover{border-color:#1D7BFF;}
.VIEW-15-for p input:focus{border-color:#1D7BFF;}


/*复制*/
.VIEW-16-for{margin-top:20px;display:flex;}
/*分页*/
.VIEW-17-for{margin-top:20px;display:flex;}