@charset "utf-8";
/**
 @Name: scclui
 @Author: zx
 @Site: http://www.xxx.com
 */

/** 初始化 **/
/* body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td,form,pre{margin: 0; padding: 0; -webkit-tap-highlight-color:rgba(0,0,0,0)}
body{-webkit-font-feature-settings: 'kern' 1; -moz-font-feature-settings: 'kern' 1; -o-font-feature-settings: 'kern' 1; text-rendering: geometricPrecision;}
a:active,a:hover{outline:0}
img{display: inline-block; border: none; vertical-align: middle;}
li{list-style:none;}
table{border-collapse: collapse; border-spacing: 0;}
h1,h2,h3{font-size: 14px; font-weight: 400;}
h4, h5, h6{font-size: 100%; font-weight: 400;}
button,input,select,textarea{font-size: 100%; }
input,button,textarea,select,optgroup,option{font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: 0;}
pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
 */
/** 滚动条 **/
/* ::-webkit-scrollbar{width: 5px; height: 10px;}
::-webkit-scrollbar-button:vertical{display: none;}
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}
 */
/** 初始化全局标签 **/
/* body{line-height: 24px;font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;}
a{color: #333; text-decoration:none; }
a:hover{color: #fff;}
a cite{font-style: normal; *cursor:pointer;} */


/* login */
.login-bg{background: url(../../images/top/login-bg-8.jpg) no-repeat center center fixed;background-size:100% 100%;}
.login-box {width: 450px;height: 330px;margin: 10% auto;background-color: rgba(255, 255, 255, 0.407843);border-radius: 10px;color: aliceblue;}
.login-box header {height: 39px;padding: 10px;border-bottom: 1px solid aliceblue;}
.login-box header h1 {text-align: center;font-size: 25px;line-height: 40px;}
.login-box .login-main {height: 185px;padding: 30px 90px 0;}
.login-main .layui-form-item {position: relative;}
.login-main .layui-form-item .login-icon {position: absolute;color: #ccc;top: 10px;left: 10px;}
.login-main .layui-form-item input {padding-left: 34px;}
.login-box footer {height: 35px;padding: 10px 10px 0 10px;}
.login-box footer p {line-height: 35px;text-align: center;}
.pull-left {float: left !important;}
.pull-right {float: right !important;}
.clear {clear: both;}
.login-remember {line-height: 38px;}
.login-remember .layui-form-switch {margin-top: 0px;}
.login-code-box {position: relative;padding:10px;}
.login-code-box input{position: absolute;width: 100px;}
.login-code-box img{cursor: pointer;position: absolute;left: 115px;height: 38px;}



/* 布局风格 */
.layout-admin{margin: 0 auto;font-size: 14px;}
.layout-header{position:relative;height:50px;z-index:100;}
.layout-side{position: fixed;display: block;top: 45px;bottom:0px;left:0px; width: 200px;overflow-x: hidden;background-color: #393D49;color: #c2c2c2;z-index:999;}
.layout-side::-webkit-scrollbar{width: 0px; height: 10px;}
.layout-main{position: absolute;top:45px;right:0;bottom: 30px;left:200px;width:auto;overflow:hidden;overflow-y: auto;background-color: #fff;z-index:998;}
.layout-main-tab{height: 39px;line-height: 39px;overflow: hidden;position: relative;background: #f2f2f2;border-bottom: solid 1px #0e9aef;}
.layout-main-body{position: absolute;top: 40px;bottom: 0;left: 0;right: 0;overflow:auto;margin:0 0 0 10px;}
.layout-footer{position: fixed; left: 200px; right: 0; bottom: 0; height: 30px;line-height:30px;background-color: #eee;border-top:1px solid #ccc;text-align:center;z-index:998;}

/* 头部 */
.header-logo{color:#ff8800;line-height:50px;font-size:20px; font-weight:bold;}
.header-bar{float:right;color:#333;height: 50px;line-height:60px;/* margin-right: 40px; */}
.header-bar li{float:left;}
.header-bar li a {margin:13px 10px;color:#333; 
line-height:24px; height:24px; display:block;
 background-image:url(../../images/top/top_icon.png); background-repeat:no-repeat; padding-left:24px;
 text-decoration:none}
.header-bar li a i{font-size:14px;}
.header-bar-nav .header-dropdown-menu{position:absolute;top:100%;display:none;background-color:#fff;border:solid 0px #ccc;border-top:none;z-index: 1000;min-width: inherit;width: inherit;}
.header-bar-nav .header-dropdown-menu li{position: relative; float: none;display:block;margin: 0;border-bottom:solid 1px #f2f2f2;width: 120px}
.header-bar-nav .header-dropdown-menu li a{display: block;clear: both;padding:0 20px 0 28px; margin:5px;text-align:left;line-height:24px;font-weight: normal;white-space:nowrap;color:#333;
background-image:url(../../images/top/top_icon.png); background-repeat:no-repeat;
}
.header-bar-nav .header-dropdown-menu li:last-child a{ border-bottom:none}
.header-bar-nav.open .header-dropdown-menu{display:block;}
.header-bar-nav.open .header-dropdown-menu.right{right:10px!important;left:auto!important}
.header-bar-nav:hover,.header-bar-nav:focus{background-color:rgba(255,255,255,0.3)}
.header-bar-nav .header-dropdown-menu li a:hover,.header-bar-nav .header-dropdown-menu li a:focus{background-color:#fafafa}
.header-menu-btn{display:none;float:right;color:#fff;width:40px;text-align:center;line-height:45px;font-size:14px;}
.header-menu-btn:hover{background-color:rgba(255,255,255,0.3)}



/** 动画 **/
@-webkit-keyframes icon-rotate{ /* 旋转360 */
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(360deg);}
}
@keyframes icon-rotate{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
.icon-anim-rotate{-webkit-animation-name: icon-rotate; animation-name: icon-rotate; -webkit-animation-duration: 1s; animation-duration: 1s;  -webkit-animation-timing-function: linear; animation-timing-function: linear;}

/** 响应式**/
@media (max-width: 750px) {
	.layout-header .header-bar .header-bar-role{display:none;}
	.layout-header .header-bar .header-bar-nav:last-child{display:none;}
	.header-menu-btn{display:block;}
	.layout-side{display:none;width:100%;}
	.layout-main{left:0px;}
	.layout-side-arrow{display:none;}
	.layout-footer{left:0px;}
}

/*main content*/
.content_main{ position:relative; background-color:#fafafa; overflow:hidden; padding:10px 0;}
.right_part{ width:50%; float:right;}

/*chart*/
.chart_part{ width:auto; height:362px; background-color:#fff; border:solid 1px #f3f3f3;}

/*function*/
.kj_fun{ width:99.6%; background-color:#fff; margin-bottom:2%;overflow:hidden; position:relative; border:solid 1px #f3f3f3;}
.kj_fun .kj_th{ background-color:#f3f3f3; height:30px; }
.kj_fun .kj_th h2{ color:#666;font-weight:bold; line-height:30px; float:left; margin-left:10px;}
.kj_fun .kj_th a{ float:right; width:30px; height:30px; background-image:url(../../images/main/more.png)}

.kj_fun .box_fun{ width:97%; margin-left:1.5%; margin-right:1.5%;display: inline-block; height: 190px;}
.kj_fun .box_fun .onebox{ width:32.3%; height:166px; margin:2% 0.5%; float:left;text-align:center;background-position:bottom right; background-repeat:no-repeat;}
.kj_fun .box_fun .onebox a{ text-decoration:none; color:#fff; font-size:24px; line-height:166px;}

.left_part{ width:50%; float:left;}

/*report download*/
.dl_report{ width:97.5%; background-color:#fff; margin-right:2.5%; margin-top:2%; overflow:hidden; position:relative; border:solid 1px #f3f3f3;}
.dl_report .dl_th{ background-color:#f3f3f3; height:30px; }
.dl_report .dl_th h2{ color:#666;font-weight:bold; line-height:30px; float:left; margin-left:10px;}
.dl_report .dl_th a{ float:right; width:30px; height:30px; background-image:url(../../images/main/more.png)}

.dl_report .box_report{ width:100%;height:308.19px; /* margin-left:1.5%; margin-right:1.5%; */display: inline-block;}
.dl_report .box_report .onebox{ width:23%; margin:10px 0.86%; padding:20px 0px;float:left;
 border:solid 1px #f3f3f3;text-align:center;}
.dl_report .box_report .onebox a{ text-decoration:none;}
.dl_report .box_report .onebox img{ width:60px; margin-left:auto; margin-right:auto; }
.dl_report .box_report .onebox p{ line-height:30px;}

/* 5card start */
.left_part .card {
    background-color:#fff;
	border:solid 1px #f3f3f3;
    position: relative;
	
	float:left;
	width:25%;
	margin-right:2%;
	margin-top:2%;
	margin-bottom:2%;
	padding:1.5% 3%;	
}
.left_part .card2{
	background-color:#fff;
	border:solid 1px #f3f3f3;
    position: relative;
	
	float:left;
	width:27.6%;
	margin-right:2%;
	padding:1.5% 10%;
	}
.card .card_content,.card2 .card_content {
    padding: 15px 15px 15px 15px;
	overflow:hidden;
}
.card .card_content .cardicon,.card2 .card_content .cardicon{ background-image:url(../../images/main/logoset_ksf.png); background-repeat:no-repeat; 
width:45px; height:45px; float:left;}
.card .numbers,.card2 .numbers {
    font-size:18px;
	font-weight:bold;
    text-align: left; 
	float:right;	
}
.card .numbers p,.card2 .numbers p{
    font-size:14px;
	font-weight:normal;
	margin:0;
	color:#9ca1b2;
}
/* toggle switch css start */
.switch-btn {position: relative; display: block; vertical-align: top; width: 90px; height: 30px; border-radius: 18px; cursor: pointer; float:left; margin-left:20px;}
.checked-switch {position: absolute; top: 0; left: 0; opacity: 0;}
.text-switch {background-color: #3fadbc; border: 1px solid #3fadbc; border-radius: inherit; color: #fff; display: block; font-size: 14px; height: inherit; position: relative;}
.text-switch:before, .text-switch:after {position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit;}
.text-switch:before {content: attr(data-no); right: 11px;}
.text-switch:after {content: attr(data-yes); left: 11px; color: #FFFFFF; opacity: 0;}
.checked-switch:checked ~ .text-switch {background-color: #5bb1ef; border: 1px solid #5bb1ef;}
.checked-switch:checked ~ .text-switch:before {opacity: 0;}
.checked-switch:checked ~ .text-switch:after {opacity: 1;}
.toggle-btn {background: linear-gradient(#eee, #fafafa); border-radius: 100%; height: 28px; left: 2px; position: absolute; top: 2px; width: 28px;}
.toggle-btn::before {color: #aaaaaa; content: "|||"; display: inline-block; font-size: 10px; width:28px; text-align:center; letter-spacing:3px; padding: 4px 0; vertical-align: middle;}
.checked-switch:checked ~ .toggle-btn {left: 60px;}
 .text-switch, .toggle-btn {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease;}
/* toggle switch css end */

/*search*/
.left_part div.search{ float:right;/* margin: 0 10px; */}
.left_part form {
  position: relative;
  width: 280px;
  margin: 0 auto;
}
.d1 input {
  width: 300px;
  height: 30px;
  padding-left:18px;
  border: 1px solid #f3f3f3;
  border-radius: 18px;
  outline: none;
  background: #fff;
  color: #666;
  font-family:'Microsoft Yahei';
}
.d1 button {
  width: 32px;
  height: 32px;
  /* margin: 0px 18px; */
  border: none;
  background: #fff;
  border-radius: 0 18px 18px 0;
  cursor: pointer;
  background:url(../../images/main/search.png);
	background-repeat:no-repeat;
	background-position:center center;
}
/*download*/
.btn_download{
  position: relative;
  float: left;
  /* margin-right: 2%; */

}

.btn_download button{
  width:120px;
  height:32px;
  border-radius:8px;
  -webkit-border-radius:8px;
  -ms-border-radius:8px;
  position:relative;
  background:#3fadbc;
  color:white;
  border:none;
  font-size:14px;
  outline:none;
  font-family:'Microsoft Yahei';
  cursor:pointer;
  background-image:url(../../images/main/download.png);
  background-repeat:no-repeat;
}
/* EIGHTH BUTTON */
#eighth:hover button{
  text-shadow:
    0 0 10px rgba(255,255,255, 1),
    0 0 50px rgba(255, 255, 255, .8),
    0 0 75px rgba(255, 255, 255, .6),
    0 0 76px rgba(255, 255, 255, .4),
    0 0 77px rgba(255, 255, 255, .5),
    0 0 78px rgba(255, 255, 255, .4),
    0 0 79px rgba(255, 255, 255, .3),
    0 0 80px rgba(255, 255, 255, .2),
    0 0 85px rgba(255, 255, 255, .1);
}

/*承运商 table*/
.right_part table.fleet {
	float:left;
	width: 100%;
	margin-top:2%;
	margin-bottom:0px;
	text-align:center;
	border-collapse: collapse;
	border: solid 1px #f3f3f3;
	
}
.right_part table.fleet th {
	line-height:36px;
	font-size:14px;
	background-color: #f3f3f3;
}
.right_part table.fleet td {
	line-height:36px;
	background-color: #fff;
	border-bottom: 1px solid #f3f3f3;
}