*{list-style-type:none;text-decoration:none;margin: 0;padding: 0;}
html{font-family: Arial,'微软雅黑','Microsoft Yahei';font-size: 14px;}
body {color: #666;min-width: 1280px;overflow-x: hidden;overflow-y: auto;}
body::-webkit-scrollbar-track-piece {background-color:#fff;-webkit-border-radius:8px 8px;border-left:0px solid #ccc;}
body::-webkit-scrollbar {width:4px;height:8px;}
body::-webkit-scrollbar-thumb {height:30px;background-color:#8EBBFA;-webkit-border-radius:10px 10px;background-position:left top;background-repeat:repeat;outline:0px solid #fff;outline-offset:-2px;border:0px solid #ccc;filter:alpha(opacity=10);-moz-opacity:0.1;opacity:0.1;}
body::-webkit-scrollbar-thumb:hover {background-color:#8EBBFA;}
.fl{float:left;}
.fr{float:right}

#canvas{
    position: fixed;
    width: 100%;
    text-align: center;
    overflow-y: auto;
    height: 100%;
    overflow-x: hidden;
}
#canvas .main-nav{width:100%;height:50px;background-color:#FFF;z-index:10;position:relative;top:0px;}
#canvas .main-nav .center{width:500px;height:50px;margin:0 auto;}
#canvas .main-nav .center .nav-buttom{width:100px;height:50px;}
#canvas .main-nav .center .nav-buttom span{color:#333;font-size:14px;line-height:50px;text-align:center;display:block;}
#canvas .main-nav .center .nav-buttom:hover span{color:#66ccff;cursor:pointer;}
#canvas .header{width:321px;height:50px;border-bottom:1px solid #c6c6c6;position:fixed;z-index:20;top:0px;right:0px;line-height:50px}
#canvas .header .nav-btn{width:80px;height:26px;text-align:center;border:1px solid #66ccff;display:inline-block;line-height:26px;margin-left:20px;border-radius:5px;color: #66ccff;}
#canvas .header .nav-btn:hover{background-color:#66ccff;color:#FFF;cursor:pointer;}

#canvas .left-contents{
    display: inline-block;
    width: 300px;
    height: 560px;
    margin-top: 60px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    box-shadow: -1px -1px 5px #eee, 1px 1px 5px #eee;
}
#canvas .left-contents .paging{width:100%;height:50px;position: relative;border-bottom: 1px solid #dcdcdc;}
#canvas .left-contents .paging a{width:50%;height:50px;display:block;color:#333;font-size:14px;line-height:50px;text-align:center;box-sizing:border-box;}
#canvas .left-contents .paging .border{border-bottom:2px solid #66ccff;}
#canvas .left-contents .paging .icon-b{
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    left: 50%;
    border-right: 1px solid #e6e6e6;
    height: 24px;
}

#canvas .left-contents .assembly{width:100%;height:100%;}
#canvas .left-contents .assembly .ass-com{display: inline-block;
    width: 100%;
    vertical-align: top;
    text-align: left;}

.edit-group{line-height: 42px;text-indent: 28px;font-size: 15px;display:none;}
.group-nav.active::after{transform: rotateZ(90deg);-webkit-transform: rotateZ(90deg);-moz-transform: rotateZ(90deg);-ms-transform: rotateZ(90deg);}
.group-nav::after{    content: "";
    display: block;
    position: absolute;
    top: 16px;
    left: 12px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #666;
    border-right: 0;
    transition: all linear .3s;}
.group-nav{position:relative;background-color:#fff;cursor:pointer;border-bottom:1px solid #d6d6d6;z-index:1;box-shadow:0 0 1px #C7C5C5;line-height: 40px;}
.group-nav .group-title{vertical-align: middle;}
.group-nav .group-edit{width:140px;height:30px;line-height:30px;border-style: none;border: 1px solid #66ccff;outline:none;font-size:14px;color:#666;padding: 0;text-indent: 5px;}

.group-nav .icon-folder {
    margin-left: 32px;
    width: 16px;
    display: inline-block;
    margin-right: 5px;
    height: 16px;
    font-size: 16px;
    vertical-align: middle;
    background: url("../images/folder.png") no-repeat center center;
}

.group-navs{display:none;}
.group-navs.active{display:block;min-height:15px;}
.group-navs .group-content{    position: relative;
    padding-left: 15px;
    line-height: 35px;
    background-color: #fff;
    border-bottom: 1px solid #c6c6c6;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.group-navs .group-content.actionPage{background:#FFF;border:1px solid #66CCFF;color:#66ccff;}
.group-page-container {
    max-height: 500px;
    line-height: 32px;
    color: #666;
    background-color: #fff;
    overflow-y: auto;}

.ass-content{display: none;width: 100%;height:209px;overflow-x: hidden;overflow-y: auto;}
.ass-content.current{display: block;}
.ass-text .icon-container{background:url(../images/text.png) no-repeat center 20px;}
.ass-picture .icon-container{background:url(../images/picture.png) no-repeat center 20px;}  
.ass-button .icon-container{background:url(../images/button.png) no-repeat center 15px;background-size: 38px;}
.ass-title-ele .icon-container{background:url(../images/title.png) no-repeat center 20px;background-size: 40px;}  
.ass-carousel .icon-container{background:url(../images/carousel.png) no-repeat center 23px;}  
.ass-classify .icon-container{background:url(../images/classify.png) no-repeat center 20px;}  
.ass-album .icon-container{background:url(../images/album.png) no-repeat center 20px;}  
.ass-list .icon-container{background:url(../images/list.png) no-repeat center 20px;}  
.ass-video .icon-container{background:url(../images/video.png) no-repeat center 20px;}  
.sp-button-container{line-height: 30px}
.sp-choose{background:#333}
.sp-input{background-color: #FFF;border:1px solid #333}
.divide-line{display: inline-block;border-left: 1px solid #959595;height: 24px;margin: 0 3px;vertical-align: middle;}

#phone-component{position: relative;display: inline-block;width: 332px;height: 678px;background-image: url(../images/6s.png);background-size: 100% 100%;background-repeat: no-repeat;vertical-align: top;z-index: 999;margin: 0 30px;}
#phone-component .phone-content{position: absolute;top: 139px;left: 22px;width: 288px;height: 454px;overflow: hidden;background-color: #fff;}

.preview-iframe {
    display: block;
    position: relative;
    width: 320px;
    height: 504px;
    transform: scale(0.9);
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    outline: none;
    border: none;
}

#phone-component.phone-6plus .phone-head {
    top: 81px;
    left: 22px;
    width: 288px;
}

.phone-head {
    position: absolute;
    top: 81px;
    left: 22px;
    width: 288px;
    height: 58px;
    background-image: url(images/phone-head.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.phone-head #go-back {
    color: #fff;
    cursor: pointer;
    position: absolute;
    left: 10px;
    top: 25px;
    font-size: 14px;
    line-height: 25px;
    padding-left: 14px;
    background-image: url(images/left.png);
    background-size: auto 15px;
    background-repeat: no-repeat;
    background-position: left center;
}



.service-component {
    display: inline-block;
    width: 300px;
    height: 560px;
    /* padding: 30px; */
    margin-top: 60px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 3px;
    box-shadow: -1px -1px 5px #eee, 1px 1px 5px #eee;
    vertical-align: top;

}

.code-container {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 218px;
    margin: 40px 0 10px;
    border: 1px solid #ccc;
    margin-top: 0px;
    margin-bottom: 30px;
    padding: 10px;
}
#preview-code {
    width: 200px;
    height: 200px;
}

.service-component .code-container-text {
    position: absolute;
    color: #535353;
    font-size: 12px;
    bottom: 3px;
    width: 200px;
    line-height: 20px;
    height: 20px;
}
.service-component .btn-wrap {
    width: 100%;
    height: 38px;
    padding: 15px 0;
    text-align: center;
}
.service-component .btn-wrap .choose-tpl {
    display: inline-block;
    width: 200px;
    height: 38px;
    background: #66ccff;
    color: #fff;
    line-height: 38px;
    cursor: pointer;
}

/***************添加模板*********************/
.angular-dialog {
    position: fixed;
    left: -9999px; 
    width: 0;
    z-index: 100;
}
.rich-dialog {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 999999;
}
.rich-content {
    width: 450px;
    margin-left: -225px;
    margin-top: -175px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;
}
.rich-title {
    height: 50px;
    line-height: 50px;
    color: #666;
    text-indent: 12px;
    font-size: 16px;
    background-color: #f0f0f0;
}
.icon-cross {
    float: right;
    cursor: pointer;
    margin: 16px;
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
.collect-page-wrap {
    margin: 20px 0 0 0;
    padding-left: 35px;
    padding-bottom: 15px;
    line-height: 40px;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
}
.rich-submit-btn {
    display: block;
    width: 150px;
    line-height: 30px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    color: #fff;
    background-color: #2c91fb;
    cursor: pointer;
}
.collect-page-wrap label {
    display: inline-block;
    width: 120px;
    text-align: right;
    color: #888;
    vertical-align: middle;
}
.collect-page-wrap .change-img-wrap {
    margin-bottom: 10px;
    vertical-align: text-top;
}

.change-img-wrap {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 234px;
    vertical-align: top;
    cursor: pointer;
    overflow: hidden;
}
.change-img-wrap img {
    width: 100%;
    height: 100%;
}
.change-img-wrap .text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 30px;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.collect-page-wrap label {
    display: inline-block;
    width: 120px;
    text-align: right;
    color: #888;
    vertical-align: middle;
}
.collect-page-wrap input {
    width: 200px;
    line-height: 30px;
    font-size: 16px;
    border: 1px solid #ccc;
    text-indent: 6px;
    outline: none;
}
.collect-page-wrap input:focus{
    border: 1px solid #66ccff;
}
#page-cocer{
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0;
}

.app-link-wrap {
    position: relative;
    text-align: left;
}
.app-link-wrap input {
    margin-left: 49px;
    width: 159px;
    height: 24px;
    padding: 0 10px 0 5px;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #535353;
    font-size: 14px;
    line-height: 24px;
    outline: none;
    /* border-radius: 3px; */
}

.app-link-wrap .copy-link-btn {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 204px;
    width: 45px;
    height: 24px;
    line-height: 24px;
    border: 1px solid #66ccff;
    color: #66ccff;
    background: #fff;
    text-align: center;
    cursor: pointer;
}
#phone-component .page-title {
    width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#phone-component.iphone .page-title {
    margin-top: 12px;
    display: inline-block;
    color: #fff;
    font-size: 16px;
}
#phone-component.iphone {
    width: 402px;
    height: 742px;
    background-image: url(../images/iphone.png);
}
#phone-component.iphone .phone-head {
    top: 14px;
    left: 14px;
    width: 374px;
    height: 46px;
    border-radius: 18px 18px 0px 0px;
    background-image: url(../images/head-black.png);
}
#phone-component.iphone .preview-iframe {
    width: 320px;
    height: 568px;
    border-radius: 0px 0px 18px 18px;
    transform: scale(1.17);
    -webkit-transform: scale(1.17);
    -ms-transform: scale(1.17);
    -moz-transform: scale(1.17);
}
#phone-component.iphone #go-back {
    top: 16px;
    color: #fff;
    font-size: 16px;
    line-height: 16px;
}
#phone-component.iphone .phone-content {
    top: 60px;
    left: 14px;
    width: 374px;
    height: 664px;
    border-radius: 0px 0px 18px 18px;
}