.layui-nav-tree .layui-nav-bar{display: none;}
.layui-layout-admin .layui-header{position: fixed; top: 0; left: 0; width: 100%; height: 50px;} 
.layui-layout-admin .layui-side{width: 220px; top: 0; z-index: 1001;}
.layui-layout-admin .layui-logo,
.layui-layout-admin .layui-header .layui-nav .layui-nav-item{height: 50px; line-height: 50px;}
.layui-layout-admin .layui-logo{position: fixed; left: 0; top: 0; z-index: 1002; width: 220px; height: 49px; padding: 0 15px; box-sizing: border-box; overflow: hidden; font-weight: 300; background-repeat: no-repeat; background-position: center center;}

.layui-side-menu .layui-side-scroll{width: 240px;}
.layui-side-menu .layui-nav{width: 220px; margin-top: 50px; background: none;}
.layui-side-menu .layui-nav .layui-nav-item a{height: 40px; line-height: 40px; padding-left: 45px; padding-right: 30px;cursor: pointer;}
.layui-side-menu .layui-nav .layui-nav-item > a{padding-top: 6px; padding-bottom: 6px;}
.layui-side-menu .layui-nav .layui-nav-item a:hover{background: none;}
.layui-side-menu .layui-nav .layui-nav-item .layui-nav-child{transition: all 0.3s;}
.layui-side-menu .layui-nav .layui-nav-itemed > .layui-nav-child{padding: 0;}
.layui-side-menu .layui-nav .layui-nav-item .nav-icon{position: absolute; top: 50%; left: 20px; margin-top: -19px; line-height: 40px;}
.layui-nav-tree .layui-nav-child dd a{padding: 3px 0;}
.layui-nav-tree .layui-nav-child dd.layui-this,.layui-nav-tree .layui-nav-child dd.layui-this a{background: none!important;font-weight: bold;}
.layui-side-menu .layui-nav .layui-nav-more{right: 15px;}

.layui-layout-admin .layui-header{border-bottom: 1px solid #f6f6f6; box-sizing: border-box; background-color: #fff;}
.layui-layout-admin .layui-header a,
.layui-layout-admin .layui-header a cite{color: #333;}
.layui-layout-admin .layui-header a:hover{color: #000;}
.layui-layout-admin .layui-header .layui-nav .layui-nav-more{border-top-color: #666}
.layui-layout-admin .layui-header .layui-nav .layui-nav-mored{border-color: transparent; border-bottom-color: #666;}
.layui-layout-admin .layui-header .layui-nav .layui-this:after, 
.layui-layout-admin .layui-header .layui-nav-bar{height: 2px; background-color: #20222A}
.layui-layout-admin .layui-logo{background-color: #20222A; box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);}
.layui-layout-admin .layui-logo,
.layui-layout-admin .layui-logo a{color: #fff; color: rgba(255,255,255,.8)}
.layui-side-menu{box-shadow: 1px 0 2px 0 rgba(0,0,0,.05);}

.layui-side-menu{background-color: #20222A; color: #fff;}

.layui-nav .layui-nav-item .layui-nav-more {top: 5px;right: 15px;width: auto;height: auto;border: none;margin-top: 0;font-size: 16px;font-style: normal;font-family: FontAwesome!important;-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}
.layui-nav .layui-nav-item .layui-nav-more::before{content: "\f105";}
.layui-nav .layui-nav-item .layui-nav-mored, .layui-nav .layui-nav-itemed .layui-nav-more {border: none;margin-top: 0;transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);}

.layui-layout-admin .layui-header a, .layui-layout-admin .layui-header a cite{color: #333;}
.layui-header .layui-nav-item .nav-icon{font-size: 16px;color: #666;}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item,
.layui-layout-admin .layui-layout-left,
.layadmin-pagetabs,
.layui-layout-admin .layui-body,
.layui-layout-admin .layui-footer,
.layui-layout-admin .layui-side,
.layui-layout-admin .layui-logo,
.layui-layout-admin .layui-header .layui-layout-right{transition: all .3s; -webkit-transition: all .3s;}

.layui-layout-admin .layui-layout-left, .layui-layout-admin .layui-body{ left: 220px; }
.layui-layout-admin .layui-layout-left{padding: 0 10px;}

.layadmin-side-shrink .layui-layout-admin .layui-logo{width: 60px; background-image: url(res/logo.png); /*background-size: 20px;)*/}
.layadmin-side-shrink .layui-layout-admin .layui-logo span{display: none;}
.layadmin-side-shrink .layui-side{left: 0; width: 60px;}
.layadmin-side-shrink .layui-layout-admin .layui-layout-left,
.layadmin-side-shrink .layadmin-pagetabs,
.layadmin-side-shrink .layui-layout-admin .layui-body,
.layadmin-side-shrink .layui-layout-admin .layui-footer{left: 60px;}
.layadmin-side-shrink .layui-side-menu .layui-nav{position: static; width: 60px;}
.layadmin-side-shrink .layui-side-menu .layui-nav-item{position: static;}
.layadmin-side-shrink .layui-side-menu .layui-nav-item>a{padding-right: 0;}
.layadmin-side-shrink .layui-side-menu .layui-nav-item cite,
.layadmin-side-shrink .layui-side-menu .layui-nav > .layui-nav-item > a .layui-nav-more,
.layadmin-side-shrink .layui-side-menu .layui-nav > .layui-nav-item > .layui-nav-child{display: none; padding: 8px 0; width: 200px;}
.layadmin-side-shrink .layui-side-menu .layui-nav > .layui-nav-itemed>a{background: rgba(0,0,0,.3);}

.layui-layout-admin .layui-body{ top: 50px; bottom: 0; background-color: #f2f2f2; }
.layui-layout-admin .layui-body .layui-inner{padding: 10px 10px 50px;box-sizing: border-box; width: 100%;/* height: 100%;*/}

.layui-col-md3{width: 20%;}
.home-team{ margin:0;}
.home-team li{color:#777;}
.home-team li:last-child{ margin-right:0;}
.home-team li .name{ margin-bottom:15px;}
.home-team li .head{ float:left; margin-right:15px;}
.home-team li .head img{ border-radius:50%;}
.home-team li .info{ float:left;}
.home-team li .info a{ color:#428bca; display:block; font-weight:700;}
.home-team li .info .small{ font-size:12px;}
.home-team li p{ line-height:20px;}
.ser-table td{ padding:11px 15px; border-top:1px solid #f6f6f6;}
.ser-table td.w100{ width:150px;}
.ser-table.rank{ text-align: center; }
.ser-table.rank th{ padding: 3px 0; }
.ser-table.rank td{padding: 9px 15px;}
.quick_btn{padding: 20px 0; background: #fff;display: flex;flex-direction: column; cursor: pointer;}
.quick_btn .item{ padding-bottom: 10px; display: flex; justify-content: center;align-items: center;}
.quick_btn .item:last-child{padding-bottom: 0;}
.quick_btn .item i{ font-size: 26px; }
.quick_btn .item .icon-1{color: rgb(105, 192, 255);}
.quick_btn .item .icon-2{color: rgb(149, 222, 100);}
.quick_btn .item .icon-3{color: rgb(179, 127, 235);}
.quick_btn .item .icon-4{color: rgb(255, 156, 110);}
.quick_btn .item .icon-5{color: rgb(255, 214, 102);}
.quick_btn .item .icon-6{color: rgb(92, 219, 211);}
.quick_btn .item .icon-7{color: rgb(255, 133, 192);}
.quick_btn .item .icon-8{color: rgb(255, 192, 105);}

.layui-table{padding: 0;margin: 0;}
.layui-table th{background-color: #f2f2f2;font-weight: bold;color: #333;font-size: 12px;}
.layui-table tr th:first-child,.layui-table tr td:first-child{text-align: center;}
.layui-table th.center,.layui-table td.center{ text-align: center; }

@media (max-width: 720px) {
    .layui-layout-admin .layui-header .layui-layout-left {
        padding: 0;
    }

    .layui-layout-admin .layui-header .layui-layout-right {
        right: 0;
        left: auto;
        min-width: 50px;
        padding: 0;
    }

    .layui-layout-admin .layui-header .layui-layout-right .layui-nav-item {
        display: none;
    }

    .layui-layout-admin .layui-header .layui-layout-right .layui-nav-item:first-child {
        display: inline-block;
    }
}
.floattop{ padding:10px 0 10px 10px; background:#fff;border:1px solid #e6e6e6; border-bottom:1px solid #f6f6f6;}
.floattop.image{height: 49px;padding: 10px;box-sizing: border-box;}
.input-append{ padding:10px 0 10px 10px; background:#fff;border-right: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;}
.layui-form-item{ margin-bottom: 0; }
.layui-form-item.postform{ padding: 10px; }
.layui-form-item.btnform{position: absolute;z-index: 999; left: 0;bottom: 0;}
.layui-form-label{padding: 0 10px 0 0; text-align: left; line-height: 36px; width: auto;}
.layui-form-item.postform .layui-form-label{ width: 100px; text-align: right; }

.layui-form-item.setform{padding: 10px 0; color: #666; font-size: 12px;}
.layui-form-item.setform .layui-form-label{ width: 100px; text-align: left;}
.layui-form-item.setform .layui-input, .layui-form-item.setform .layui-select{ height: 36px; line-height: 36px; }
.layui-input-block.slidebox{display: flex;align-items: center;}
.diy-style-slide{ width: 100%; }
.layui-form-item.setform .layui-form-radio>i{font-size: 16px;}

.layui-form-item .layui-input-inline.select-form{ width: 130px; }
.layui-form-item .layui-input-inline.attr{ width: 100px; }
.layui-input, .layui-select{ height: 36px; line-height: 36px; }
.layui-btn{height: 36px; line-height: 36px;}
.layui-btn-sm{ height: 30px; line-height: 30px; }
.layui-btn-group{padding: 0;}
.layui-table .layui-form-checkbox[lay-skin=primary]{padding-left: 0;}
.layui-laypage{margin: 0;}
.layui-input.list{ width: 50%; display: inline-block;}

.layui-layer-btn a{ height: 36px; line-height: 36px; }
.layui-layer-btn .layui-layer-btn0{background-color: #009688;}

.cus-badge .layui-badge{margin: 0; top: 5px;}

.attr-close{position: absolute; top: -5px; right: -5px; border-radius: 100%;background-color: #fff; width: 20px; height: 20px; z-index: 99;display: flex; align-items: center;justify-content: center;box-shadow: 0 0 5px #ddd;}
.attr-close .layui-icon{font-size: 13px;}

.hidebtn{display: none;}
.addpic{ width: 120px; height: 120px; float: left; margin-bottom: 5px; margin-right: 5px;overflow: hidden;position: relative; background-color: #f2f2f2;border-radius: 5px; cursor: move;}
.addpic.up{ text-align: center; line-height: 120px; cursor: pointer;}
.addpic.up i{ font-size: 30px; color: #666;}
.addpic img{ width: 100%;border-radius: 5px;}
.addpic .delct{ position: absolute; height: 30px; width: 100%;display: block; line-height: 30px; background: rgba(0, 0, 0, 0.8);color: #fff;cursor: pointer; text-align: center; bottom: 0; left: 0; cursor: pointer;}
.addpic .ipt{ height: 18px; line-height: 18px; margin-top: 2px; width: 110px; }

.imgbox{ height: 40px; }
.imgbox .imgitem{float: left; margin-right: 10px; width: 40px;height: 40px;overflow: hidden;}
.imgbox .imgitem.up{line-height: 40px;text-align: center;background: #f1f1f1;cursor: pointer;}

.imglist{ width: 100%; height: 457px;overflow-y: auto; padding: 0 10px 10px;box-sizing: border-box;}
.imglist .item{ width: 100px; margin-right: 10px;  margin-top: 10px; float: left; cursor: pointer;}
.imglist .item .imgbox{ width: 100px; height: 100px; overflow: hidden; }
.imglist .item .imgbox img{ width: 100%; }
.imglist .item .imginfo{ width: 100px; white-space: nowrap; overflow: hidden;text-overflow: ellipsis; padding-top: 3px;}

.authtitle{font-weight: bold;color: #333;}
.authcontent{ padding-bottom: 10px; }

.board{padding-left:55px; background:url(../images/bg_repno.gif) no-repeat -240px -543px;}
.lastnode, .lastboard{padding-left:55px; background:url(../images/bg_repno.gif) no-repeat -240px -600px;}
.childboard{padding-left:110px; background:url(../images/bg_repno.gif) no-repeat -185px -543px;}
.childerboard{padding-left:165px; background:url(../images/bg_repno.gif) no-repeat -185px -500px;}
.lastchildboard{padding-left:110px; background:url(../images/bg_repno.gif) no-repeat -185px -600px;}
.boardattr{position:absolute; left:340px; margin-top:-20px !important; margin-top:-19px; color:#999;}
.addtr{padding-left:17px; line-height:25px; background:url(../images/bg_repno.gif) no-repeat 0 1px;  *background:url(../images/bg_repno.gif) no-repeat 0 0;
color:#F60;}
.addchildboard{padding-left:17px; line-height:25px; background:url(../images/bg_repno.gif) no-repeat 2px -599px;  *background:url(../images/bg_repno.gif) no-repeat 2px -600px;
color:#FFF;}
.addchildboard:hover{text-decoration:none; color:#F60;}
.togchildboard{background:url(../images/bg_repno.gif) no-repeat 2px -621px;  *background:url(../images/bg_repno.gif) no-repeat 2px -622px;}

.btnbox{position: fixed; z-index: 2; bottom: 0; left: 220px; width: 100%; padding: 5px 10px;box-sizing: border-box;background-color: #f8f8f8;box-shadow: 0 0 4px rgba(0,0,0,.08);box-sizing: border-box;}
.btnbox .ckbox{ width: 82px; margin-left: 5px; text-align: center; display: inline-block; }

.tempbox{ padding: 10px 10px 0; font-size: 14px; width: 400px; }
.tempbox a{ padding-bottom: 10px; display: block; width: 200px; float: left; }
.setbox{background-color: #fff;border: 1px solid #e6e6e6;border-top: none;}
.box-show{display: block;}
.box-hide{display: none;}

.file-item{ width: 120px; height: 90px; background-color: #f2f2f2;border-radius: 3px;padding: 0; }

.infobox{background:#fff; border:1px solid #ddd; border-radius:3px; padding:50px 0; text-align:center;}
.infobox h2{ font-size:16px; font-style:normal; padding:5px 0 10px 0;}
.infobox h2 span{ color:#f60;}

/*聊天页面*/
.chatwrap{ padding-top: 30px; }
.chatwrap .scrollbox::-webkit-scrollbar {width:5px;}
.chatwrap .scrollbox::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #535353;}
.chatwrap .scrollbox::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #EDEDED;}
.chatbox{ width: 1200px; height: 800px; margin: 0 auto;background: #fff;display: flex;flex-direction: column;}
.chatbox .chat-header{background-color: #009688; color: #fff;font-size: 14px;padding: 0 10px; height: 50px; line-height: 50px;}
.chatbox .chat-inner{ flex: 1; display: flex; }
.chatbox .chat-inner .chat-list{ width: 300px; border-right: 1px solid #eee;}
.chatbox .chat-inner .chat-list .chat-head{ height: 50px;border-bottom: 1px solid #eee;display: flex;align-items: center; padding: 0 20px; }
.chatbox .chat-inner .chat-list .user-list{ height: 699px; overflow-y: auto; }
.chatbox .chat-inner .chat-list .user-list .chat-item{ padding: 15px 10px;display: flex;align-items: center; cursor: pointer;border-bottom: 1px solid #eee;border-left: 3px solid #fff;}
.chatbox .chat-inner .chat-list .user-list .chat-item:last-child{border-bottom:none;}
.chatbox .chat-inner .chat-list .user-list .chat-item.on{background-color: #fafafa;border-left: 3px solid #009688;}
.chatbox .chat-inner .chat-list .user-list .chat-item .headpic{ width: 40px; height: 40px; }
.chatbox .chat-inner .chat-list .user-list .chat-item img{ width: 100%; height: 100%;border-radius: 100%; }
.chatbox .chat-inner .chat-list .user-list .chat-item .info{ padding:0 0 0 10px; flex: 1;}
.chatbox .chat-inner .chat-list .user-list .chat-item .nickname{ width: 90%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; font-size: 14px;color: #666;}
.chatbox .chat-inner .chat-list .user-list .chat-item .nickname label{ font-size: 12px;padding-left: 5px; color: #009688;}
.chatbox .chat-inner .chat-list .user-list .chat-item .nickname label.un{color: #999;}
.chatbox .chat-inner .chat-list .user-list .chat-item .message{font-size: 12px;padding-top: 5px;color: #999; width: 130px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}
.chatbox .chat-inner .chat-list .user-list .chat-item .timebox{ padding-left: 10px; display: flex; flex-direction: column; align-items: flex-end;font-size: 12px;color: #999;}
.chatbox .chat-inner .chat-list .user-list .chat-item .num{ width: 15px; height: 15px;border-radius: 100%;background-color: #fc4141; color: #fff;display: flex;align-items: center;justify-content: center; margin-top: 5px;}

.chatbox .chat-inner .chat-content{ flex: 1; height: 750px;border-right: 1px solid #eee; display: flex;flex-direction: column;}
.chatbox .chat-inner .chat-content .message-list{ height: 500px; overflow-y: auto;}
.chatbox .chat-inner .chat-content .message-list .message-item{display: flex;align-items: flex-start;padding: 10px;}
.chatbox .chat-inner .chat-content .message-list .message-item.right-message{flex-flow: row-reverse;}
.chatbox .chat-inner .chat-content .message-list .message-item .head{ width: 40px; height: 40px; border-radius: 100%; }
.chatbox .chat-inner .chat-content .message-list .message-item .message{ padding:10px; box-sizing: border-box; background-color: #eee;color: #666;font-size: 14px; margin-left: 10px; min-height: 40px;display: flex;align-items: center;border-radius: 5px; position: relative;}
.chatbox .chat-inner .chat-content .message-list .message-item.right-message .message{margin-right: 10px; margin-left: 0;background-color: #009688;color: #fff;}
.chatbox .chat-inner .chat-content .message-list .message-item .message:before{content: '';position: absolute;width: 0;height: 0;left: -15px;top: 10px;border: 10px solid;border-color: transparent #eee transparent transparent;}
.chatbox .chat-inner .chat-content .message-list .message-item.right-message .message:before{display: none;}
.chatbox .chat-inner .chat-content .message-list .message-item.right-message .message:after{content: '';position: absolute;width: 0;height: 0;right: -15px;top: 10px;border: 10px solid;border-color: transparent transparent transparent #009688;}

.chatbox .chat-inner .chat-content .chat-select{ padding: 15px 10px;border-top: 1px solid #eee; }
.chatbox .chat-inner .chat-content .chat-select i{cursor: pointer; margin-right: 10px;}
.chatbox .chat-inner .chat-content .inpbox{ width: 100%; padding: 10px;flex: 1;box-sizing: border-box; position: relative;}
.chatbox .chat-inner .chat-content .inpbox .inp-message{ font-size: 14px; color: #666; width: 100%; height: 100%;border:none; outline: none;resize: none;}
.chatbox .chat-inner .chat-content .inpbox .message-send-btn{position: absolute; right: 10px; bottom: 10px; z-index: 99;}
.chatbox .chat-inner .chat-content .inpbox .message-send-btn.disabled{background-color: #ddd; color: #666;}
.chatbox .chat-inner .user-info{ width: 300px; }
.chatbox .chat-inner .user-info .head{padding: 10px;display: flex;align-items: center;border-bottom: 1px solid #eee;}
.chatbox .chat-inner .user-info .img{width: 40px; height: 40px; border-radius: 100%;}
.chatbox .chat-inner .user-info .nickname{font-size: 14px; color: #666; padding-left: 10px;}
.chatbox .chat-inner .user-info .detail{ padding: 10px 10px 0; display: none;}
.chatbox .chat-inner .user-info .detail .item{ padding-bottom: 10px; font-size: 14px; display: flex; align-items: center; }
.chatbox .chat-inner .user-info .detail label{ width: 100px; text-align: left; color: #999;}

.chat-emotion{position: fixed; z-index: 999; background-color: #fff;padding: 10px;border:1px solid #eee; display: none;}
.chat-emotion .eline{display: flex; width: 320px;flex-wrap: wrap;}
.chat-emotion .eline .eitem{padding: 5px; display: flex; align-items: center; cursor: pointer;}
.chat-emotion .eline .eitem img{ width: 30px; height: 30px; }

/*自定义页面配置样式*/
.pagebox{display: flex;padding: 10px;background-color: #fff;box-sizing: border-box;}
.pagebox .modelbox{width: 300px; height: 100%; border:1px solid #ddd;border-radius: 5px; overflow-y: auto;}
.pagebox .modelbox .model-title{ height: 38px; line-height: 38px;border-bottom: 1px solid #ddd;padding-left: 10px;border-radius: 5px 5px 0 0; }
.pagebox .modelbox .model-inner{ padding: 10px; }
.pagebox .modelbox .model-inner .mt{color: #666; padding-bottom: 15px;font-size: 12px;}
.pagebox .modelbox .model-inner .mc{display: flex; flex-wrap: wrap;}
.pagebox .modelbox .model-inner .mc .model-item{ display: flex; flex-direction: column; align-items: center;justify-content: center; width: 70px; height: 70px; margin: 0 10px 10px 0; font-size: 12px; color: #999;cursor: pointer; }
.pagebox .modelbox .model-inner .mc .model-item i{font-size: 20px;}
.pagebox .modelbox .model-inner .mc .model-item p{ padding-top: 3px; }
.pagebox .warp{display: flex; flex: 1 1 0%; background-color: #ddd;padding: 20px 0; flex-direction: column;align-items: center;}
.pagebox .warp .page-title{ height: 40px; display: flex;align-items: center;justify-content: center; background: #fc4141;font-size: 12px; color: #fff;width: 400px; margin: 0 50px;cursor: pointer;}
.pagebox .contentbox{ width: 400px; height: 100%; margin: 0 50px; background-color: #fff;overflow-y: auto;overflow-x: hidden;}
.pagebox .contentbox .drag-item{cursor: move; position: relative;box-sizing: border-box;width: 100%;/* background-color: #fafafa;padding: 20px 0; */}
.pagebox .contentbox .drag-item .drag-delbox{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 8;box-sizing: border-box;display: none;}
.pagebox .contentbox .drag-item.on .drag-delbox,.pagebox .contentbox .drag-item:hover .drag-delbox{border:2px dashed #009688;display: block;}
.pagebox .contentbox .drag-item .drag-del{position: absolute; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.8); z-index: 9;cursor: pointer; color: #fff;padding: 2px 5px;display: none;font-size: 11px;}
.pagebox .contentbox .drag-item.on .drag-del,.pagebox .contentbox .drag-item:hover .drag-del{display: block;}
.pagebox .attrbox{width: 400px; height: 100%; border:1px solid #ddd;border-radius: 5px;overflow-y: auto;overflow-x: hidden;}
.pagebox .attrbox .attr-title{height: 38px; line-height: 38px;border-bottom: 1px solid #ddd;padding-left: 10px;border-radius: 5px 5px 0 0;}
.pagebox .attrbox .attr-inner{padding: 10px;}
.pagebox .attrbox .attr-inner .attr-tip{ font-size: 12px;color: #999; padding: 10px 0;border-bottom: 1px solid #ddd; }

.pagebox .scrollbox::-webkit-scrollbar {width:5px;}
.pagebox .scrollbox::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);background: #535353;}
.pagebox .scrollbox::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #EDEDED;}

.pagebox .tpl-nav-attr-data{}
.pagebox .tpl-nav-attr-data .item{padding: 10px 0;border-bottom: 1px solid #ddd;display: flex;position: relative;}

.pagebox .tpl-nav-attr-data .item .nav-close{position: absolute; top: 0; left: 65px; width: 20px; height: 20px; border-radius: 100%;background: rgba(0, 0, 0, 0.8); color: #fff;z-index: 2;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.pagebox .tpl-nav-attr-data .item .nav-close i{font-size: 12px;}
.pagebox .tpl-nav-attr-data .item .imgbox{ width: 80px; height: 80px; display: flex; align-items: center;justify-content: center;background: #e6e6e6;}
.pagebox .tpl-nav-attr-data .item .imgbox i{color: #666; font-size: 20px;}
.pagebox .tpl-nav-attr-data .item .info{flex: 1; padding-left: 10px;display: flex; flex-direction: column; justify-content: center;}
.pagebox .tpl-nav-attr-data .item .info .layui-input{ height: 30px; line-height: 30px; }
.pagebox .tpl-nav-attr-data .item .info .layui-inline{ padding-bottom: 5px; }
.pagebox .tpl-nav-attr-data .item .info .layui-inline:last-child{padding-bottom: 0;}

.pagesave{position: fixed; z-index: 9; bottom: 0; left: 0; box-sizing: border-box; padding-left: 230px; width: 100%;background: #fff; height: 45px;display: flex;align-items: center; justify-content: center;}

/*组件样式*/
.tpl-box{width: 100%;}
.tpl-swiper{ width: 100%; height: 100px; overflow: hidden;background-color: #fafafa;}
.tpl-swiper img{ width: 100%; }

.tpl-goods{padding: 0 10px;}
.tpl-goods .tpl-goods-item{display: flex; width: 100%;padding-bottom: 10px;}
.tpl-goods .tpl-goods-item .info{flex: 1; padding-left: 10px;display: flex;flex-direction: column;justify-content: space-between;background: #fff;}
.tpl-goods .tpl-goods-item .info .ibox{}
.tpl-goods .tpl-goods-item .info .title{font-size: 14px;color: #333;font-weight: bold;}
.tpl-goods .tpl-goods-item .info .brief{color: #999;font-size: 12px; }
.tpl-goods .tpl-goods-item .info .pricebox{color: #fc4141;font-size: 18px;font-weight: bold;}
.tpl-goods .tpl-goods-item .info .pricebox span{font-size: 14px; font-weight: normal;}
.tpl-goods .tpl-goods-item .imgbox{ display: flex;align-items: center; justify-content: center;border-radius: 5px;background: #e6e6e6;overflow: hidden;}
.tpl-goods .tpl-goods-item .imgbox i{font-size: 26px; color: #666;}
.tpl-goods.tpl-goods-show-one .tpl-goods-item .imgbox{ width: 100px; height: 100px;}
.tpl-goods.tpl-goods-show-one-big .tpl-goods-item{flex-direction: column;}
.tpl-goods.tpl-goods-show-one-big .tpl-goods-item .imgbox{ width: 100%; height: 240px; border-radius: 5px 5px 0 0;}
.tpl-goods.tpl-goods-show-one-big .tpl-goods-item .info{ padding-top: 5px; border-radius: 0 0 5px 5px;}
.tpl-goods.tpl-goods-show-one-big .tpl-goods-item .info .pricebox{ padding-top: 15px;}
.tpl-goods.tpl-goods-show-two{display: flex;flex-wrap: wrap;}
.tpl-goods.tpl-goods-show-two .tpl-goods-item{flex-direction: column; margin-right: 2%; width: 49%;}
.tpl-goods.tpl-goods-show-two .tpl-goods-item:nth-child(2n){margin-right: 0;}
.tpl-goods.tpl-goods-show-two .tpl-goods-item .imgbox{ width: 100%; height: 200px;border-radius: 5px 5px 0 0;}
.tpl-goods.tpl-goods-show-two .tpl-goods-item .info{padding-top: 5px;border-radius: 0 0 5px 5px;}
.tpl-goods.tpl-goods-show-two .tpl-goods-item .info .pricebox{ padding-top: 15px;}

.tpl-goods.tpl-goods-show-three{display: flex;flex-wrap: wrap;}
.tpl-goods.tpl-goods-show-three .tpl-goods-item{flex-direction: column; margin-right: 2%; width: 32%;}
.tpl-goods.tpl-goods-show-three .tpl-goods-item:nth-child(2n){margin-right: 0;}
.tpl-goods.tpl-goods-show-three .tpl-goods-item .imgbox{ width: 100%; height: 100px;border-radius: 5px 5px 0 0;}
.tpl-goods.tpl-goods-show-three .tpl-goods-item .info{padding-top: 5px;border-radius: 0 0 5px 5px;}
.tpl-goods.tpl-goods-show-three .tpl-goods-item .info .pricebox{ padding-top: 15px;}

.tpl-nav{ padding: 10px 10px 0;}
.tpl-nav .navbox{ width: 100%; display: flex; flex-wrap: wrap;}
.tpl-nav .tpl-nav-item{ margin-right: 2%; display: flex; flex-direction: column; align-items: center; justify-content: center;padding-bottom: 10px;}
.tpl-nav .tpl-nav-item .tpl-nav-imgbox{width: 50px; height: 50px;background: #e6e6e6;display: flex;justify-content: center;align-items: center;overflow: hidden;}
.tpl-nav .tpl-nav-item .tpl-nav-imgbox i{font-size: 23px; color: #666;}
.tpl-nav .tpl-nav-item .tpl-nav-title{ padding-top: 5px; text-align: center; font-size: 12px;}
.tpl-nav.tpl-nav-show-one .tpl-nav-item{ width: 23.5%; }
.tpl-nav.tpl-nav-show-one .tpl-nav-item:nth-child(4n){ margin-right: 0;}
.tpl-nav.tpl-nav-show-two .tpl-nav-item{ width: 18.4%; }
.tpl-nav.tpl-nav-show-two .tpl-nav-item:nth-child(5n){ margin-right: 0;}

.tpl-article{padding: 0 10px;}
.tpl-article .tpl-article-item{display: flex;justify-content: space-between; padding: 10px 0;border-bottom: 1px solid #f1f1f1;}
.tpl-article .tpl-article-item .imgbox{ display: flex;align-items: center; justify-content: center;background: #e6e6e6;overflow: hidden; width: 120px; height: 80px;}
.tpl-article .tpl-article-item .imgbox i{font-size: 26px; color: #666;}
.tpl-article .tpl-article-item .info{ padding-left: 10px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.tpl-article .tpl-article-item .info .title{font-size: 14px;color: #333;font-weight: bold;}
.tpl-article .tpl-article-item .info .brief{color: #999;font-size: 12px; color: #666;}
.tpl-article .tpl-article-item .info .time{color: #999;font-size: 12px;}
.tpl-article.tpl-article-show-two .tpl-article-item{flex-flow: row-reverse;}
.tpl-article.tpl-article-show-two .tpl-article-item .info{ padding-left: 0; padding-right: 10px; }
.tpl-article.tpl-article-show-three .tpl-article-item{ flex-direction: column; }
.tpl-article.tpl-article-show-three .tpl-article-item .imgbox{ display: none; }
.tpl-article.tpl-article-show-three .tpl-article-item .info{padding: 0;}
.tpl-article.tpl-article-show-three .tpl-article-item .info .ibox {padding-bottom: 20px;}

.tpl-text img{ width: 100%; }

.tpl-image{ width: 100%; height: 100px; overflow: hidden;}
.tpl-image .tpl-image-imgbox{ width: 100%; height: 100%;box-sizing: border-box;}
.tpl-image img{ width: 100%; }
.tpl-image .tpl-image-imgbox .empty{ display: flex;align-items: center; justify-content: center; width: 100%; height: 100%; background: #fafafa;}
.tpl-image .tpl-image-imgbox .empty i{font-size: 26px; color: #666;}

.tpl-blank{ width: 100%; height: 10px; }

.tpl-community{ padding: 0 10px; }
.tpl-community .tpl-community-item{ padding: 10px 0; border-bottom: 1px dotted #ddd;}
.tpl-community .tpl-community-item:last-child{border-bottom: 0;}
.tpl-community .tpl-community-item .user{ display: flex; padding-bottom: 5px; }
.tpl-community .tpl-community-item .user .headpic{ width: 30px; height: 30px; border-radius: 100%;overflow: hidden; margin-right: 10px;}
.tpl-community .tpl-community-item .user .headpic img{width: 100%; height: 100%; border-radius: 100%;}
.tpl-community .tpl-community-item .user .info{flex: 1; display: flex;flex-direction: column;justify-content: center;}
.tpl-community .tpl-community-item .user .nickname{ padding-bottom: 5px;font-weight: bold; font-size: 12px;}
.tpl-community .tpl-community-item .user .time{color: #999;font-size: 12px;}
.tpl-community .tpl-community-item .bd{font-size: 12px; color: #666; line-height: 1.5;}
.tpl-community .tpl-community-item .com-imgbox{ margin-top: 10px; display: flex; flex-wrap: wrap;}
.tpl-community .tpl-community-item .com-imgbox .img-item{ width: 32%; height: 130px;display: flex; justify-content: center; align-items: center; background: #fafafa; margin-right: 2%;}
.tpl-community .tpl-community-item .com-imgbox .img-item i{font-size: 20px; color: #666;}
.tpl-community .tpl-community-item .com-imgbox .img-item:nth-child(3n){ margin-right: 0; }

.tpl-search{ padding: 10px; display: flex;align-items: center; background: #fc4141;font-size: 12px; color: #666; }
.tpl-search .txtinfo{ height: 30px; line-height: 30px; box-sizing: border-box; width: 100%; padding:0 15px; background: #fff;border-radius: 20px;}

.tpl-promote{padding: 10px;}
.tpl-promote .tpl-promote-title{ font-size: 13px;font-weight: bold;color: #333;}
.tpl-promote .tpl-promote-stitle{font-size: 12px;color: #666; padding-top: 5px;}
.tpl-promote .tpl-promote-list{display: flex;flex-wrap: wrap;}
.tpl-promote .tpl-promote-list .tpl-promote-item{ width: 49%; margin-right: 2%;padding-top: 10px;}
.tpl-promote .tpl-promote-list .tpl-promote-item:nth-child(2n){margin-right: 0;}
.tpl-promote .tpl-promote-list .tpl-promote-item .pro-imgbox{ width: 100%; height: 160px; background: #fafafa;display: flex;align-items: center;justify-content: center; border-radius: 5px 5px 0 0;}
.tpl-promote .tpl-promote-list .tpl-promote-item .pro-imgbox i{font-size: 20px; color: #666;}
.tpl-promote .tpl-promote-list .tpl-promote-item .pro-info{}
.tpl-promote .tpl-promote-list .tpl-promote-item .goodsname{font-size: 12px; font-weight: bold; color: #666; height: 40px; line-height: 40px; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.tpl-promote .tpl-promote-list .tpl-promote-item .price{color: #fc4141;font-size: 15px;font-weight: bold;}
.tpl-promote .tpl-promote-list .tpl-promote-item .price label{ padding-right: 3px;font-size: 12px;font-weight: normal;}
.tpl-promote .tpl-promote-list .tpl-promote-item .tags{}
.tpl-promote .tpl-promote-list .tpl-promote-item .tags label{float: left; margin-right: 4px;font-size: 10px;background-color: #fc4141;color: #fff;border-radius: 2px;padding: 2px 4px; margin-top: 5px;}
.tpl-promote .tpl-promote-list .tpl-promote-item .binfo{font-size: 12px;color: #999;display: flex; padding-top: 5px; width: 100%;}
.tpl-promote .tpl-promote-list .tpl-promote-item .sellnum{justify-content: flex-end;flex: 1;display: flex;}
.tpl-promote .tpl-promote-list .tpl-promote-item .feednum{justify-content: flex-start;flex: 1;display: flex;}

.tpl-seckill{ padding: 10px; }
.tpl-seckill .tpl-seckill-title{display: flex; align-items: center; padding-bottom: 10px;}
.tpl-seckill .tpl-seckill-title .sec-icon{ width: 18px; height: 18px;}
.tpl-seckill .tpl-seckill-title .tpl-image-imgbox{width: 100%; height: 100%;border-radius: 100%;}
.tpl-seckill .tpl-seckill-title .tpl-image-imgbox img{ width: 100%; height: 100%; border-radius: 100%;}
.tpl-seckill .tpl-seckill-title span{flex: 1;}
.tpl-seckill .tpl-seckill-title .more{display: flex;justify-content: flex-end;}
.tpl-seckill .tpl-seckill-list{display: flex;overflow: hidden; width: 100%;}
.tpl-seckill .tpl-seckill-list .tpl-seckill-item{ margin-right: 10px; display: flex;flex-direction: column; }
.tpl-seckill .tpl-seckill-list .tpl-seckill-item .sec-imgbox{ width: 120px; height: 120px;background: #fafafa;display: flex;align-items: center;justify-content: center; border-radius: 5px 5px 0 0;}
.tpl-seckill .tpl-seckill-list .tpl-seckill-item .sec-imgbox i{font-size: 20px; color: #666;}
.tpl-seckill .tpl-seckill-list .tpl-seckill-item .sec-info{}
.tpl-seckill .tpl-seckill-list .tpl-seckill-item .goodsname{font-size: 12px; color: #666;padding: 5px 0; white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.tpl-seckill .tpl-seckill-list .tpl-seckill-item .price{color: #fc4141;font-size: 12px;font-weight: bold;padding-bottom: 5px;}
.tpl-seckill .tpl-seckill-list .tpl-seckill-item .price label{ padding-right: 3px;font-size: 12px;font-weight: normal;}
.tpl-seckill .tpl-seckill-list .tpl-seckill-item .sec-buy{padding: 5px 0; text-align: center;border-radius: 0 0 5px 5px;background: #fc4141; color: #fff;font-size: 13px;}