﻿/*引入 ku-ui-ico */
@import url('//at.alicdn.com/t/c/font_4839918_dv46f7ch3sg.css');


body { background: #f2f3f5 }
*, *:before, *:after { box-sizing: border-box; }
.ku-layout-admin { }

/* 后台框架大布局 */
.ku-layout-body { overflow-x: hidden; }
.ku-layout-admin .layui-header { background-color: #23292e; }
.ku-layout-admin .layui-side { top: 60px; width: 200px; overflow-x: hidden; }
.ku-layout-admin .layui-body { position: absolute; top: 60px; padding-bottom: 44px; left: 0px; }
.ku-layout-admin .layui-main { width: auto; margin: 10px 10px; }

.ku-layout-admin .layui-logo { position: absolute; left: 0; top: 0; width: 200px; height: 100%; line-height: 60px; text-align: center; color: #16baaa; font-size: 16px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 15%); }
.ku-layout-admin .layui-header .layui-nav { background: none; }
.ku-layout-left { position: absolute !important; top: 0; }
.ku-layout-right { position: absolute !important; right: 0; top: 0; }
.ku-layout-admin .layui-logo img { width: 140px; line-height: 60px; }





.ku-main { margin: 20px 0; }
.layui-container { }
.home-container { position: relative; margin: 0 auto; display: flex; flex-direction: row; }
.ku-body { margin: 0 auto; overflow-x: hidden; }
.ku-footer { width: 100%; padding-top: 20px; padding-bottom: 20px; background-color: #353535; color: #fff; text-align: center; }
.ku-footer p { margin-bottom: 10px; }
.ku-footer a { color: #fff; }
.ku-side { position: sticky; top: 60px; margin-right: 20px; height: fit-content; border-radius: 4px; max-height: calc(100vh - 60px); /*overflow-x: hidden;*/ }
.tabs-nav { width: 200px; padding: 0px 10px; background: #fff; box-shadow: 0 4px 30px 0 rgba(238, 242, 245, 0.8); }
.tabs-nav li { font-size: 16px; line-height: 40px; cursor: pointer; -webkit-transition: all 0.24s; transition: all 0.24s; }
.tabs-nav li i { color: #1e80ff; vertical-align: middle; margin-right: 12px; }
.tabs-nav li.on { color: #1e80ff; font-weight: 500; background-color: #eaf2ff; }
.tabs-nav li a { padding: 5px 10px; display: inline-block; width: 100%; box-sizing: border-box; position: relative; }




/*头部*/
.ku-header { background: #000; height: 60px; }

.ku-menu { margin-right: auto; margin-left: 20px; background: transparent; }
.ku-menu-more { line-height: 60px; padding: 0 16px; cursor: pointer; vertical-align: middle; }
.ku-menu-more .layui-icon { color: #fff; }
.ku-search { display: flex; background: #FFF; }
.ku-search .search-input { position: relative; border: solid #c6cede; border-width: 1px 0px 1px 1px; padding: 0 10px; }
.ku-search .search-btn { width: auto; color: #000000; cursor: pointer; border: none; background: #ffffff; height: 30px; font-size: 15px; display: inline-block; text-align: center; line-height: 30px; padding: 0 5px; }
.ku-header-fx { transition: transform 0.3s ease-in-out; }
.ku-header-fx .ku-side { top: 80px; max-height: calc(100vh - 80px); }
.ku-header-fx { position: fixed; width: 100%; z-index: 999; top: 0px; }

@media (min-width: 767.98px) {
    .ku-header .ku-menu-container { max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
    .ku-header .ku-logo { color: #fff; font-size: 16px; font-weight: 700; }
}

@media screen and (max-width: 767.98px) {
    .ku-menu { display: none; }
    .ku-header .ku-menu-container { position: absolute; text-align: center; left: 48px; right: 0; bottom: 0; top: 0; margin-left: -48px; }
    .ku-header .ku-logo { color: #fff; font-size: 16px; line-height: 60px; cursor: none; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
    /*.ku-layout .ku-logo { left: 50%; margin-left: -48px; width: auto; }*/
    .ku-side { display: none; }
}



.ku-menu-show { }
/* 字体颜色 */
.layui-font-white { color: #fff !important; }
/*浅*/
.layui-bg-white { background: #fff; }
.layui-bg-white .layui-tab-content { padding: 10px; }
/*卡片*/
.layui-card-brief .layui-card-header { border-bottom: 0px; }

.ku-card { background: #fff; border: 1px solid #e6e6e6; overflow: hidden; padding: 15px; background-color: #f4f5f6; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 阴影效果 */ transition: transform 0.3s ease; /* 卡片触摸时的动画效果 */ }
.ku-card:hover { /*border-color: #009688;*/ box-shadow: 0 3px 5px rgba(0,0,0,.3); }
.ku-card-header { display: flex; justify-content: space-between; /* 内容左右分布 */ align-items: center; /* 垂直居中 */ padding: 10px; }
.ku-card-iconfont { font-size: 45px; color: #009688; margin-right: 10px; }
.ku-card-title { flex-grow: 1; /* 允许标题占据剩余空间 */ font-size: 16px; font-weight: 400; }
.ku-card-body { padding: 10px 10px; font-size: 14px; line-height: 1.5; color: #999; }

.layui-card h2 { padding-left: 15px; position: relative; }
.layui-card h2::after { position: absolute; left: 0; top: 14px; content: ""; width: 3px; height: 14px; background-color: #1f81f8; }


.item-cover { margin-right: 15px; width: 64px; height: 64px; border-radius: 4px; object-fit: cover; max-width: 100%; display: flex; align-items: center; justify-content: center; }
.item-cover .ku-icon { font-size: 45px; color: #009688; margin-right: 5px; }
.item-info { overflow: hidden; }
.item-info-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-info-des { height: 40px; line-height: 1.6; margin-top: 6px; font-size: 12px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #666; }


/*  --  上下 左右 拖动  -- */
.ku-resize { width: 100%; cursor: n-resize; border: 1px solid #ddd; background: #eee; display: flex; align-items: center; justify-content: center; height: 20px; }
.editor { width: 100%; background: red; height: 100%; }
/*#jsoneditorr { background: green; }*/
.ku-split-container { display: flex; width: 100%; height: 400px; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; }

.ku-col-left, .ku-col-right { display: flex; flex-direction: column; box-sizing: border-box; border: 1px solid #ddd; width: 50%; }
.ku-col-splitter { width: 20px; background-color: #eee; cursor: ew-resize; user-select: none; display: flex; align-items: center; justify-content: center; }



/*  -- flex弹性布局 -- */
.flex { display: flex; }

.basis-xs { flex-basis: 20%; }

.basis-sm { flex-basis: 40%; }

.basis-df { flex-basis: 50%; }

.basis-lg { flex-basis: 60%; }

.basis-xl { flex-basis: 80%; }

.flex-sub { flex: 1; }

.flex-twice { flex: 2; }

.flex-treble { flex: 3; }

.flex-direction { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.align-start { align-items: flex-start; }

.align-end { align-items: flex-end; }

.align-center { align-items: center; }

.align-stretch { align-items: stretch; }

.self-start { align-self: flex-start; }

.self-center { align-self: flex-center; }

.self-end { align-self: flex-end; }

.self-stretch { align-self: stretch; }

.align-stretch { align-items: stretch; }

.justify-start { justify-content: flex-start; }

.justify-end { justify-content: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.justify-around { justify-content: space-around; }



#resizeJsonEditor { width: 100%; background-color: #f6f6f6; cursor: n-resize; -webkit-box-sizing: content-box; text-align: center; border: 1px solid #ddd; }
