@charset "utf-8";
@import url("./siteBase.css");
@import url("./wapcomps.css");

body.sort .moduleComp{ margin: 0;}
/*设计器内容区域*/
#ll_webMain{position: absolute; top: 60px; left: 0;right: 0; bottom: 0; z-index: 1; background-color: #e6e6e6;}
#moduleToolbar{ z-index: 99;}
/*左侧组件模块*/
#ll-sidebar{ position: absolute; z-index: 9; top: 0; left: 0; bottom: 0; width: 360px; background-color: #fff;}
#ll-sidebar .siderTitle{background: #eee;height: 50px;position: relative;z-index: 1;}
#ll-sidebar .siderTitle li.moduleTab{ height: 50px; width: 180px; float: left; text-align: center; line-height: 50px; cursor: pointer; overflow: hidden; position: relative;}
#ll-sidebar .siderTitle li.moduleTab.on{ background-color: #5874d8; color: #fff;}
#ll-sidebar .siderTitle li.moduleTab.on:before{ position: absolute; width: 10px; height: 10px; background-color: #fff; content: ""; left: 50%; margin-left: -5px; bottom: -5px; transform: rotate(45deg);}
#addModuleList{position: absolute; top:70px; right: 5px; bottom: 10px; left: 15px; padding-right: 10px;}
#ll_webNavList{left: auto; top: 61px; bottom: 0; position: fixed;}
.moduleBar{ display: none; position: absolute; top: 0; right: -360px; bottom: 0; z-index: 99; width: 360px; overflow: hidden; background: #fff; transition:all .3s;}
.moduleBar.on,.moduleBar.editStyle{ right: 0;}
.moduleBar .closeModule{position: absolute;top: 20px;right: 15px;font-size: 14px;z-index: 99;cursor: pointer;}
.moduleBar .closeModule:hover{color: #5874d8;}
.moduleBar .moduleBarTab{background: #f8f8f8;height: 55px;border-bottom: 1px solid #ddd;padding-left: 5px;position: relative;z-index: 1;}
.moduleBar .moduleBarTab > .module_title{ padding-left: 10px; height: 55px; line-height: 55px; color: #5874d8;}
.moduleBar .moduleBarTab ul > li{ margin: 0 10px; height: 55px; text-align: center; line-height: 55px; cursor: pointer; width: 70px; display: inline-block;}
.moduleBar .moduleBarTab ul > li.on{ color: #5874d8;}
.moduleBar .tabSelect{ width: 70px;  height: 2px; position: absolute; left:15px; bottom: -1px; background-color: #5874d8; z-index: 9;}

#ll-mainbar{ position: absolute; top: 80px; width: 400px; bottom: 80px; left: 50%; margin-left: -200px; z-index: 1; background-color: #fff; box-shadow: 0 0 6px 0 rgba(0,0,0,.2);}

#ll-sidebar .addModule_group{ padding-bottom: 10px;}
#ll-sidebar .curModule_list{ position: absolute; top: 50px; right: 0; bottom: 0; left: 0;}
#ll-sidebar .curModule_list .curModule_tabList{ position: absolute; top: 0; left: 0; right: 0; height: 50px; border-bottom: 1px solid #ddd; text-align: center;}
#ll-sidebar .curModule_list .curModule_tabList > span.curModuleOn{ position: absolute; width: 80px; left:10px; bottom: -1px; z-index: 9; background-color: #5874d8; height: 2px;}
#ll-sidebar .curModule_list .curModule_tabList > ul{ padding-left: 10px;}
#ll-sidebar .curModule_list .curModule_tabList li.curModuleTab{width: 80px;height: 50px;text-align: center;line-height: 50px;cursor: pointer;display: inline-block; margin: 0 20px;}
#ll-sidebar .curModule_list .curModule_tabList li.curModuleTab.on{ color: #5874d8;}
#ll-sidebar .curModule_list .curModule_tabInfo{ position: absolute; top: 70px; right: 10px; bottom: 60px; left: 20px; padding-right: 10px;}

#ll-btnsBar{ width: 400px; left: 50%; margin-left: -200px; z-index: 1; top: 80px; bottom: 80px; position: absolute;}
#ll-btnsBar .moduleBtnsList{ position: absolute; right: -80px; bottom: -10px; width:60px;}
#ll-btnsBar .moduleBtnsList > .moduleBtns{width:48px; height: 48px; border-radius: 48px; overflow: hidden; position: relative; background-color: #fff; box-shadow: 2px 3px 7px 0 rgba(0,0,0,.2); margin-bottom: 18px; cursor: pointer; transition:all .3s;}
#ll-btnsBar .moduleBtnsList > .moduleBtns > i{width: 30px;height: 30px;font-size: 22px; position: absolute;top: 12px;left: 14px;}
#ll-btnsBar .moduleBtnsList > .moduleBtns > i.iconguanli3{font-size: 20px;top: 12px;left: 15px;}
#ll-btnsBar .moduleBtnsList > .moduleBtns > i.iconyangshixiugai{font-size: 24px;top: 8px;left: 13px;}
#ll-btnsBar .moduleBtnsList > .moduleBtns > span{font-size: 15px;line-height: 48px;display: none;position: absolute;left: 51px;top: 0;}
#ll-btnsBar .moduleBtnsList > .moduleBtns:hover{ width: 100px;color: #fff; background-color: #5874d8;}
#ll-btnsBar .moduleBtnsList > .moduleBtns:hover span{ display: block;}
#ll-btnsBar .moduleBtnsList > #modBtns_SEO:hover{ width: 135px;}

.moduleBarList .moduleSidebar{position: absolute; top:70px; right: 5px; bottom: 10px; left: 15px; padding-right: 10px;}
.moduleBarList .llw-field-title{ margin-bottom: 15px; }
.moduleBarList .llw-field-title > legend{ font-size: 16px; font-weight: normal; margin-left: 10px; padding: 0 8px;}

.mainbarScroll::-webkit-scrollbar{width: 5px;background-color:#ddd; border-radius: 4px; }
.mainbarScroll::-webkit-scrollbar-track{border-radius: 10px; background-color: transparent ;}
.mainbarScroll::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #9c9da0; }

/*网站主题设置*/
#ll_webStyle #webStyleSet.moduleSidebar{ bottom: 60px;}
#ll_webStyle #webThemeList{ min-height: 100px; padding-bottom: 10px;}
#ll_webStyle #webThemeList li{ float: left; width: 34px; height: 34px; margin: 10px 14px; text-align: center;}
#ll_webStyle #webThemeList li.defColor{  border-radius: 2px; border: 1px solid #ddd;}
#ll_webStyle #webThemeList li > .themeColor{  border-radius: 2px; display: block; width: 24px; height: 24px; margin: 4px auto;  cursor: pointer; border: 1px solid rgba(0,0,0,.15);}
#ll_webStyle #webThemeList li.on{ border-color: #5874d8;}
#ll_webStyle #webThemeList li.on > .themeColor{  font-family: layui-icon!important; color: #fff; line-height: 24px;}
#ll_webStyle #webThemeList li.on > .themeColor::after{ content: "\e605";}
#ll_webStyle #webThemeList li.on > .layui-colorpicker{border-color: #5874d8;}
#ll_webStyle #webThemeList li[data-color="#2ec770"] > .themeColor{ background-color: #2ec770;}
#ll_webStyle #webThemeList li[data-color="#fc3333"] > .themeColor{ background-color: #fc3333;}
#ll_webStyle #webThemeList li[data-color="#ff7214"] > .themeColor{ background-color: #ff7214;}
#ll_webStyle #webThemeList li[data-color="#fbbe40"] > .themeColor{ background-color: #fbbe40;}
#ll_webStyle #webThemeList li[data-color="#06c1ae"] > .themeColor{ background-color: #06c1ae;}
#ll_webStyle #webThemeList li[data-color="#3285ff"] > .themeColor{ background-color: #3285ff;}
#ll_webStyle #webThemeList li[data-color="#999999"] > .themeColor{ background-color: #999999;}
#ll_webStyle #webThemeList li[data-color="#bfa073"] > .themeColor{ background-color: #bfa073;}
#ll_webStyle #webThemeList li[data-color="#292929"] > .themeColor{ background-color: #292929;}
#ll_webStyle #webThemeList li > .themeName{ padding-top: 5px; line-height: 25px; display: none;}
#fontSlide .layui-slider-input-txt input{padding-left: 0; text-align: center;}
#ll_webStyle .layui-form-label{ padding: 9px 9px 0 9px;}
#ll_webStyle .layui-form-radio{ padding-right: 0;}
#ll_webStyle #themeBgImg{ display: block; width: 100px; cursor: pointer;}
#ll_webStyle .themeBg_list >.layui-form-item{ display: none;}

#ll-layout{ overflow: hidden;}

#ll-layout li.ll-comps{box-shadow: 0 0 10px 0 rgba(0,0,0,.1); margin-left: -37px; margin-top: -20px; color: #225dab; transform:none!important; background: #fff;}
#ll-layout .compsBox{outline: 1px #ddd dashed; }
#ll-layout .compsBox:hover{outline: 1px #357ebd dashed;}
#ll-layout .compsBox.ll-sortItems{z-index: 1; border: 0;}
#ll-layout .compsBox.ll-sortItems:hover{border:0; z-index: 8;}
#ll-layout .compsBox > .ll_toolbtn{ position: absolute; top: -47px; height: 47px; left: 0; display: none; white-space: nowrap;}
#ll-layout .downToolbar > .ll_toolbtn{top:0}

#ll-layout{ height: 100%;}
.editLab #lljz_webBg{position: absolute;}
#lljz_web_layout{ height: 100%; overflow-x: hidden; overflow-y: scroll; box-sizing: border-box; padding-top: 50px; padding-bottom: 50px; position: relative; z-index: 5;}
#lljz_web_main{ min-height: 100%;}

#lljz_web_header,#lljz_footer{ position: absolute; left: 0; right: 5px; z-index: 9;}
#lljz_web_menu{ z-index: 9;}
#lljz_web_header .compsBox,#lljz_web_menu .compsBox,#lljz_footer .compsBox{ outline: 0;}

#ll-contextmenu > .ll_conMenu_list{width: 180px;}
#ll-contextmenu > .ll_conMenu_list > .ll_conMenu_title{ height: 50px; line-height: 50px;}

/* 手机头部组件模块 */
.com_header .webHeaderBox{ position: absolute;}
.com_menu,.com_menu:hover,.com_header,.com_header:hover{outline: none!important;}
body.onNavs #lljz_web_menu{ position: absolute; top: 0; bottom: 0; width: 100%;}
body.onNavs #lljz_web_header,body.onNavs #lljz_service{ right: 0;}

.editLab #webBackTop{ position: absolute;}
body.tNavs #titleNavList{position: absolute; right: 0; left: 0; }

/*栏目导航图标*/
#ll_webNavList .webNav_list.hasIcon .ll_navList .navLink > span.navIcon{ display: inline-block; width: 24px; height: 24px; line-height: 24px; vertical-align: middle; margin-right: 10px; cursor: pointer; border: 1px solid #ddd; background-color: #fff; text-align: center;}

#ll_webNavList .webNav_list.hasIcon .ll_navList:hover .navLink > span.navIcon,#ll_webNavList .webNav_list.hasIcon .ll_navList.on .navLink > span.navIcon{ color: #555;}
#ll_webNavList .webNav_list .defIcon{ font-family: "iconfront"; font-size: 16px;}
#ll_webNavList .webNav_list .defIcon:before{content: '\e624';}
#ll_webNavList .webNav_list .defIcon[data-type='index'] span.defIcon:before{content: '\e634';}
#ll_webNavList .webNav_list .defIcon[data-type='product'] span.defIcon:before{content: '\e77d';}
#ll_webNavList .webNav_list .defIcon[data-type='news'] span.defIcon:before{content: '\e691';}
#ll_webNavList .webNav_list .defIcon[data-type='msg'] a span.defIcon:before{content: '\e60a';}
#ll_webNavList .webNav_list .defIcon[data-type='map'] a span.defIcon:before{content: '\e665';}

.listBtns{ position: absolute; bottom: 0; right: 0; white-space: nowrap; font-size: 0; display:none; background-color: #5874d8; z-index: 99999;}
.listBtns > span{ display: inline-block; font-size: 13px; width: 24px; height: 24px; color: #fff; text-align: center; line-height: 24px; border-left: 1px solid #ddd; cursor: pointer;}
.listBtns > span:first-child{ border-left: 0;}

.com_listPhoto .photo_WidHigh:hover .listBtns,
.com_articleList .newsListBox li:hover .listBtns,
.com_productList li.proList_li:hover .listBtns{display: block;}