@charset "utf-8";
@import url("/static/layui/css/layui.css?v=ud_157909154185888");
@import url("../iconfont/iconfont.css");
@import url("./formReset.css");
@import url("./animate.css");
*{margin: 0; padding: 0}
html, body{height: 100%;overflow: hidden; background-color: #fff;}
body{-webkit-transition: margin 500ms ease;-moz-transition: margin 500ms ease;-ms-transition: margin 500ms ease;-o-transition: margin 500ms ease;transition: margin 500ms ease; overflow: hidden;}
ul,li{list-style: none}
body, input, select, textarea{font-family:'Microsoft YaHei', '微软雅黑';}
body{color: #636776; font-size: 14px;}
body a{color: #636776; text-decoration: none;}
body a:hover{color: #225dab;}
/*截取字数*/
.ellipsis{white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; -o-text-overflow: ellipsis;}
/*请除float样式*/
.clearfix::before,.clearfix::after{ content:""; height: 0; display: block; overflow: hidden; clear: both; line-height: 0; width: 100%;}
/*通用阴影样式*/
.boxShadow{box-shadow: 0 0 17px 1px rgba(0,0,0,.1);}
/*空状态样式*/
.ll_empty_img{fill: #f5f5f5;}
.ll_empty_img_g {stroke: #d9d9d9;}
.ll_empty_img_path {fill: #fafafa;}
/*网站公共滚动样式条*/
.ll_scorllbar{overflow-y: auto; overflow-x: hidden;}
.ll_scorllbar::-webkit-scrollbar{width: 5px;background-color:#f9f9f9; border-radius: 10px;}
.ll_scorllbar::-webkit-scrollbar-track{border-radius: 10px; background-color: transparent ;}
.ll_scorllbar::-webkit-scrollbar-thumb{border-radius: 10px; background-color: #7388d2;}

#tempView{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;}
#tempView .temp_top{ height: 80px; border-bottom: 1px solid #ddd;}
#tempView .temp_t_box{ margin: 0 auto; width: 1200px; position: relative;}
#tempView .templateTips{ position: absolute; top: 35px; left: 150px; white-space: nowrap;  font-size: 15px; display: none;}
#tempView .temp_title,#tempView .temp_top .tempName{ position: absolute; left: 0; height: 58px; padding: 0 15px; line-height: 50px; text-align: center; padding-top: 20px; font-size: 18px; border-bottom: 3px solid #225dab; color: #225dab;}
.preview #tempView .templateTips{ display: block;}
.preview.hasWeb #tempView .temp_title{ display: none;}
#tempView .temp_top .tempName{ display: none;}
.preview.hasWeb #tempView .temp_top .tempName{ display: block;}
#tempView .temp_search{ position: absolute; right: 0; top: 20px;}
#tempView .temp_search .layui-input-inline{ margin: 0; width: auto;}
#tempView .temp_search .layui-btn{ height: 35px;}
.preview.hasWeb #tempView .temp_search{ display: none;}

#tempView .temp_close{ position: absolute; right: 10px; top: 24px; font-size: 30px; color: #999; cursor: pointer; display: none;}
#tempView .tempBtnList{ position: absolute; right: 0; top: 20px; display: none;}
#tempView .tempBtnList > span{ width: 100px;}
.preview.hasWeb #tempView .tempBtnList{ display: block;}


#tempView .temp_con{ position: absolute; top:110px; right: 0; left: 0; bottom: 20px;}
#tempView .temp_c_box{ width:1200px; margin: 0 auto; height: 100%; position: relative;}
#tempView .temp_type{ position: absolute; top: 0; left: 0; bottom: 0; width: 160px;}
#tempView .temp_type_lan{ height: 45px; font-weight: bold;}
#tempView .temp_type_list{ padding-right: 10px; position: absolute; top: 35px; right: 0; bottom: 0; left: 0;}
#tempView .temp_type_list li{ height: 35px; line-height: 35px;}
#tempView .temp_type_list li span.tType{ cursor: pointer;}
#tempView .temp_type_list li span.tType:hover,#tempView .temp_type_list li.on span.tType{ color: #225dab;}
#tempView .temp_type_list li.on span.tType{font-weight: bold;}

#tempView .temp_list{ position: absolute; top: 0; right: 0; bottom: 0; left: 200px;}
#tempView .temp_list ul{ padding-top: 15px; position: absolute; top: 0; right: 0; left: 0; bottom: 50px;}

.hasWeb #tempView .temp_list li{ width:310px; float: left; height:300px; margin: 0 10px 30px 10px; border-radius: 6px; position: relative;  overflow: hidden; background-color: #fff; box-shadow: 0 0 5px 1px rgba(0,0,0,.1);}
.hasWeb #tempView .temp_list li:hover{box-shadow: 0 0 12px 1px rgba(0,0,0,.1);}
.hasWeb #tempView .temp_list li span.tempUse{ position: absolute; top: 0; right: 0; border-bottom-left-radius: 6px; border-top-right-radius: 6px; background-color: rgba(255, 86, 34, 0.808); color: #fff; font-size: 12px; padding: 5px 8px; white-space: nowrap; z-index: 9;}
.hasWeb #tempView .temp_list li .tempImg{ position: relative; height:220px; overflow: hidden; }
.hasWeb #tempView .temp_list li .tempImg img{ width: 100%; display: block;  }
.hasWeb #tempView .temp_list li:hover .tempImg img{ -webkit-animation: scrollImg ease-in-out 2s; animation: scrollImg ease-in-out 2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards}

.hasWeb #tempView .temp_list li .tempName{ padding-top: 15px; margin: 0 10px; font-size: 15px; text-align: center; line-height: 26px;}
.hasWeb #tempView .temp_list li .tempBtn{ display: none; background-color: #fff; bottom: 0; left: 0; right: 0; height: 55px; text-align: center; z-index: 9; position: absolute; padding-top: 15px; border-top: 1px solid #ddd;}
.hasWeb #tempView .temp_list li:hover .tempBtn{ display: block;}
.hasWeb #tempView .temp_list li .tempBtn .layui-btn{ width: 100px;}
#tempView .layui-flow-more{ clear: both;}
/* #laypage_temp{ text-align: center; padding-top: 10px; position: absolute; bottom: 10px; height: 30px; left: 0; right: 0;} */

@keyframes scrollImg {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(calc(-100% + 220px))
    }
}

.hasWeb #previewUrl{ position: absolute; right: 0; left: 0; top: 100%; bottom: 0; background-color: #fff; z-index: 99; transition: top 500ms ease; }
.hasWeb #previewUrl > iframe{border: 0; width: 100%; height: 100%;}
.hasWeb #previewUrl .mask{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.3); z-index: 99; display: none;}
.hasWeb #previewUrl .mask .layui-icon-loading{ color: #fff; width:50px; height: 50px; text-align: center; line-height: 50px; font-size: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; z-index: 9;}
.preview.hasWeb #previewUrl{ top: 81px;}


#useTempBox{ padding: 25px 25px 0 25px;}
#useTempBox .utbBackup{ text-align: center; height: 30px; line-height: 30px; background-color: #fff6d0; border: 1px solid #ddd; color: #000; }
#useTempBox .utbBackup > a{ color: #225dab; font-weight: bold; margin: 0 3px;}
#useTempBox .utbTips{line-height: 30px; text-align: center;}
#useTempBox .utbTips b{ color: #FF5722; font-weight: bold; margin: 0 2px;}

.hasWap #tempView .temp_list li{ width:230px; float: left;  margin: 0 5px 30px 10px; border-radius: 6px; position: relative;   background-color: #fff;  transition: all 300ms ease; height: 410px;}
.hasWap #tempView .temp_list li span.tempUse{ position: absolute; top: 30px; right: 20px; border-bottom-left-radius: 6px; border-top-right-radius: 6px; background-color: rgba(255, 86, 34, 0.808); color: #fff; font-size: 12px; padding: 5px 8px; white-space: nowrap; z-index: 9;}
.hasWap #tempView .temp_list li .tempImg{ position: relative; width: 200px; height: 300px; border-color: #f3f4f5; border-style: solid; border-top-width: 30px; border-right-width: 12px; border-bottom-width: 12px; border-left-width: 10px;  border-radius: 12px;  box-shadow: 0 0 5px 1px rgba(0,0,0,.1);  }
.hasWap #tempView .temp_list li .tempImg:hover{box-shadow: 0 0 12px 1px rgba(0,0,0,.1); }
.hasWap #tempView .temp_list li .tempImg .imgBg{ position: absolute; top: 0; right: -1px; bottom: 0; left: 0; background-repeat: no-repeat; background-size:cover; background-position: top center;}
.hasWap #tempView .temp_list li .tempImg::before{ content:""; position: absolute; width: 80px; left: 50%; margin-left: -40px; background-color: #ddd; top: -18px; border-radius: 4px; height: 5px;}
.hasWap #tempView .temp_list li:hover{zoom: 1; transform: translate(0,-10px);}

.hasWap #tempView .temp_list li .tempName{ padding-top: 10px; margin: 0 10px; font-size: 15px; text-align: center; line-height: 30px;}
.hasWap #tempView .temp_list li .tempBtn{background-color:rgba(0,0,0,.5); bottom: 0; left: 0; right: 0; text-align: center; z-index: 9; position: absolute; padding-top: 15px; border-top: 1px solid #ddd; display: none; padding-top: 130px;}
.hasWap #tempView .temp_list li:hover .tempBtn{ display: block;  top: 0;}


.hasWap #previewUrl{ position: absolute; right: 0; left: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,.7); z-index: -999; opacity: 0; transition: opacity 500ms ease;} 
.hasWap #previewUrl .wapView{ position: absolute; top: 100px; bottom: 100px; width: 1000px; left: 50%;margin-left: -500px;}
.hasWap #previewUrl .wapView iframe{border: 0; width: 100%; height: 100%;}
.hasWap #previewUrl .iframeView{ position: absolute; top: 0; left: 0; bottom: 0; width: 400px; overflow: hidden;background-color: #fff; border-color: #f3f4f5;border-style: solid;border-top-width: 70px;border-right-width: 12px;  border-bottom-width: 50px;border-left-width: 10px; border-radius: 12px;}
.hasWap #previewUrl .wapView::before{ position: absolute;  top: 33px; width: 60px; height: 10px;border-radius: 20px;background-color: #ddd; left: 173px;content: "";z-index: 99;}
.hasWap #previewUrl .mask{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.3); z-index: 99; display: none;}
.hasWap #previewUrl .mask .layui-icon-loading{ color: #fff; width:50px; height: 50px; text-align: center; line-height: 50px; font-size: 50px; position: absolute; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; z-index: 9;}
.hasWap #previewUrl .rightView{ position: absolute; right: 0; top: 50%; width: 350px; height: 400px; margin-top: -200px; text-align: center;}
.hasWap #previewUrl .rightView .viewTitle{ height:45px; font-size: 20px; text-align: center; color: #fff; width: 250px; margin: 0 auto;}
.hasWap #previewUrl .rightView  #viewQRcode{ width: 256px; margin: 0 auto; height: 256px; background-color: #fff; border: 15px solid #fff; border-radius: 10px;}
.hasWap #previewUrl .rightView .viewBtnList{ padding-top: 25px; width: 260px; margin:0 auto;}
.hasWap #previewUrl .rightView .viewBtnList > .layui-btn{ width: 100px; float: left;}
.hasWap #previewUrl .rightView .viewBtnList > .layui-btn-danger{ float: right;}
.hasWap.preview #previewUrl{ opacity: 1; z-index: 999;}
.hasWap.preview #previewUrl .closeView{ position: absolute;  top: 10px; right: 10px; width: 60px; height: 60px; text-align: center; line-height: 60px; font-size: 50px; color: #ddd; z-index: 999; cursor: pointer;}