body,ul,ol,p,h1,h2,h3,h4,button {margin: 0;padding: 0;}
img {border: none;}
ul,li,ol {list-style: none;}
a {text-decoration: none;color: #000;}
a:hover{color: #ff0000;}
body {font-family: "-apple-system, Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;; }
html {overflow-y: scroll;-webkit-text-size-adjust: none;overflow-x: hidden;}
body {width: 100vw;overflow: hidden;}

/*公共*/
.red{color:#F07330}
.redf{color:#ff0000}
.blue{color:#307ADA}
.green{color:#59B90C}
.margin20{margin: 20px 0;}
.fontbold{font-weight: 900;}
.base-column{display: flex;flex-direction: column;align-items: center;}
.base-row-space{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}

.base-row{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: space-between;}
.base-row-around{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: space-around;}


@media screen and (min-width: 980px) {
    .m-header,.sjj_nav{display: none;}
    body {min-width: 1240px;font-size: 14px;color: #000;}
    .main-cont{width: 1240px;margin: 0 auto;}
    .margin-top{padding-top: 10px;}
    /**头部开始**/
    .topheader{height: 90px;position: fixed;top: 0;width: 100%;position: fixed;left: 0px;z-index: 999;background:#fff;}
    .logo{width: 180px;float:left;}
    .menu{float:left;width: 620px;margin-top: 20px;}
    .menu a{color: #000;font-size: 16px;padding: 0 20px;font-weight: 600;}
    .menu .active{color: #F07330;font-weight: 900;}
    .menu a:hover{color: #F07330;}
    .toplogin{ width: 200px;float:right;text-align: right;line-height: 60px;}
    .headimage{position: relative;text-align: center;}
    .headimage img{width: 48px; height: 48px; border-radius: 50%;}
    .top-user-info{position: absolute; width: 200px; background: #FAFAFA; border-radius: 5px; height: 260px;z-index: 888;
        box-shadow: 2px 1px 4px #999;display: none;flex-direction: column;line-height: 1.5;
    }
    .top-user-info .enter-user{height: 45px;width: 200px;line-height: 45px;color:#fff;background:#307ADA;border-radius: 5px;text-align: center;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
    .top-user-info .balance{margin-top: 30px; font-size: 18px;font-weight: 900;color: #F07330;}
    .top-user-info .money-user{height: 35px;width: 160px;margin:20px; line-height: 35px;color:#fff;background:#F07330;border-radius:30px;text-align: center;}
    .top-user-info .exit-user{margin-top: 30px; border-top: 1px solid #ccc;height: 35px;width: 200px;line-height: 35px;}
    .headimage:hover .top-user-info{display: flex;}
    
    
    /**头部结束**/
    /**底部开始**/
    footer{background: #FAFAFA;height: 350px;border-top:1px solid #CCCCCC;}
    .footer-cont{width: 1240px;margin: 0 auto;display: flex;flex-direction: row;justify-content: space-between;}
    .footer-left{width: 750px;display: flex;flex-direction: row}
    .footer-right{width: 430px;display: flex;flex-direction: row;justify-content: space-between;margin-top: 30px;border-left: 0px solid #ccc;}
    .footer-menu{margin: 30px 0;width: 390px;margin-left: 50px;}
    .footer-menu h3{font-size: 18px;font-weight: 900;}
    .footer-menu ul{padding-top: 30px;}
    .footer-menu li{float:left; width: 170px;height: 40px;}
    .footer-menu li a{font-size: 14px; }
    .footer-intro{width: 350px; font-size: 14px;margin: 30px 0;color: #000;font-weight: 300;padding-right: 50px;text-align: center;border-right: 1px solid #ccc;}
    .footer-intro span{display: block;font-size:14px;margin: 20px 0;text-align: left;line-height: 25px;}
    .work-time{}
    .work-time h3{font-size: 18px;font-weight: 900;}
    .work-time p{font-weight: 300;padding-top: 20px;line-height: 25px;}
    .erweima{width: 160px;}
    .footer-copyright{padding-top:15px;text-align: center;font-size: 12px;border-top: 1px solid #dcdcdc;line-height: 35px;}
    .footer-copyright a{padding: 0 10px;}
    .m-footer-copyright{display: none;}
    /**公共部分**/
    .line{border-bottom: 1px solid #dcdcdc;}
    .h90{ clear:both;height: 90px;}
    
    /**首页开始**/
    .page-right-btn{height: 330px;width: 70px;background: #fff;position: fixed;bottom: 80px;right: 0px;z-index: 100;box-shadow: 2px 2px 8px #999;}
    .page-right-btn .page-right-btn-cont{display:flex;flex-direction: column;align-items: center;padding: 10px 0;}
    .page-right-btn .float-link{height: 60px;border-bottom: 1px solid #eee;text-align: center;padding: 10px 0;font-size: 12px;}
    .page-right-btn .float-link i{font-size: 30px;font-weight: 900;}
    .page-right-btn .no-border{border: 0;}
    /**弹出充值套餐**/
    .show-recharge-plan{display:flex;flex-direction: column;margin: 40px;}
    .show-recharge-plan .plan-title{font-size: 24px; font-weight: 900;padding-bottom: 10px;border-bottom: 1px solid #eee;}
    .show-recharge-plan .plan-title-small{font-size: 14px;margin: 20px 0;display: flex;flex-direction: row;}
    .show-recharge-plan .plan-list-th{display: flex;flex-direction: row;justify-content: space-between;height: 30px;line-height: 30px; font-weight: bold;background: #eee;}
    .show-recharge-plan .plan-list-th div{width: 25%;text-align: center;}
    .show-recharge-plan .plan-list{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: flex-start;}
    .show-recharge-plan .plan-list .plan-list-cont{width: 25%;text-align: center;border-bottom: 1px solid #eee;height: 35px;line-height: 35px;}
    .show-recharge-plan .plan-list-btn{clear:both; text-align: center; margin: 0 auto; margin-top: 30px;}
    .show-recharge-plan .plan-list-read{display: flex;flex-direction: row;align-items: center;margin: 0 auto;margin-top: 30px;justify-content:center;}
    .show-recharge-plan .plan-list-read p{color:#666;}
    .show-recharge-plan .plan-list-read a{color:#FF0000;}
    
    
    .index-cont{height: 100%; background: #fff; }
    .index-cont-box{padding: 20px; display: flex;flex-direction: row;justify-content: space-between;backgrond: #ff0000;}
    .index-banner{height:600px; overflow: hidden;}
    .index-cont-swiper{width: 100%;height: 600px;}
    .swiper {width: 100%;height: 600px;}
    .swiper-slide {background: #fff;display: flex;justify-content: center;position: relative;}
    .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;position: absolute;ackground: #ccc;}
    
    .index-search{height: 250px; width: 1200px; margin: auto; position: relative; z-index: 100; top: -450px;}
    .index-search h1{font-size: 46px;font-weight: 900;text-align: center;color: #fff;}
    .index-search h2{ font-size: 36px; font-weight: 200; text-align: center;color: #fff;}    
    .search-form{ width: 1000px;background: #fff;height: 60px;border-radius: 5px; margin: 0 auto; margin-top: 30px; display: flex; flex-direction: row;}
    .search-select{width: 223px; height: 50px;float: left;background: #F4F4F4;padding: 10px 10px 0 20px;border-bottom-left-radius: 5px; border-top-left-radius: 5px;font-size: 14px;}
    .search-select .layui-input{text-align: center;font-size: 16px;background-color: #F4F4F4 !important;border: 1px solid #F4F4F4 !important;}
    .search-select .layui-input:focus {border-color:#009158;outline: none !important;box-shadow: none;}
    .search-input{float: left;width: 100%; padding: 5px 0 0 20px;border-top: 1px solid #F4F4F4;border-bottom: 1px solid #F4F4F4;}
    .search-input .layui-input{border: 0;height: 50px;line-height: 50px;font-size: 16px; color: #000;outline: none;}
    .search-input input::placeholder {color: #ccc;}
    .search-input .layui-input:focus {border-color:#009158 !important;outline: none !important;box-shadow: none;}
    .search-photo{  float: right; width: 30px; padding-top: 18px; padding-right: 20px;border-top: 1px solid #F4F4F4;border-bottom: 1px solid #F4F4F4;}
    .search-btn{float: right; width: 80px;height: 60px;}
    .search-submit{width: 80px; height: 60px; background-color: #307ADA; border-radius: 0; border-bottom-right-radius: 5px; border-top-right-radius: 5px; background-image: url(../images/search.png) no-repeat;}
    .search-tag{height: 40px;display: flex;flex-direction: row;width: 1000px;margin: 0 auto;margin-top: 20px;}
    .search-tag a{background-color: rgba(0,0,0,0.8);padding: 0px 20px;margin: 0 10px;color: #fff;font-size: 14px;border-radius: 15px;height: 25px; line-height: 22px;}
    .search-tag a:hover{background-color: #F57327}
    
    .search-form .layui-form-selected dl{width: 180px;}
    .search-form .layui-form-select dl{border: 1px solid #eee;left: -20px;z-index: 1000;}
    /**搜索文件框**/
    .search-form .search-file{display: none; position: absolute; top:198px; z-index: 888;width: 1000px; background: #fff; border: 1px dashed #ccc; height: 200px; border-radius: 5px;;}
    .search-form .search-file-class{top:60px;}
    .search-form .search-file-cont{display: flex; margin: 0 auto; flex-direction: column;align-items: center;padding: 30px;}
    .search-form .search-file-cont i{margin-bottom: 10px;font-size: 80px;color: #ccc;}
    .search-end-img{display: flex;flex-direction: column;align-items: center;margin: 10px;}
    .search-end-img img{max-width: 180px;max-height: 180px;border: 1px solid #eee;padding: 5px;}

    .index-main-bg{height: 100%; background: #FAFAFA;overflow: hidden;}
    .index-ad{display: flex;flex-direction: row;justify-content: space-between;margin-top: 30px;padding-bottom: 30px;}
    .index-ad .ad-content{width: 290px;height: 160px;border-radius: 2px;}
    .index-ad a{position: relative;}
    .index-ad .ad-layer{position: absolute;background-color: rgba(0, 0, 0, 0.5);top: 0;width: 290px;height: 160px;border-radius: 2px;text-align:center;display: none;}
    .index-ad .ad-layer .layui-icon{font-size: 38px;color: #fff;padding-top: 55px; display: flex; justify-content: center;}
    .index-ad a:hover .ad-layer{display: block;}
    
    .index-intro{margin-top: 30px;display: flex;flex-direction: column;align-items: center;}
    .index-intro h1{font-size: 36px;font-weight: 900;}
    .index-intro h3{font-size: 24px;font-weight: 200;color: #6E6E6E;}
    .redbtn{padding: 10px 50px;font-size: 18px; color: #fff; background: #F57327; border-radius: 30px;}
    .redbtn:hover{background: #DD0000; color: #fff;}
    
    .index-icon{margin-top: 30px;display: flex;flex-direction: row;justify-content: space-between; margin-bottom: 80px;}
    .index-icon .index-icon-cont{width: 320px;display: flex;flex-direction: row;align-items: center;}
    .index-icon .index-icon-cont .icon-cont-left{margin-left: 20px;}
    .index-icon .index-icon-cont h1{font-size: 24px;font-weight: 900;}
    .index-icon .index-icon-cont p{font-size: 18px;font-weight: 200;}
    
    .index-main-title{margin-top: 50px; margin-bottom: 50px;}
    .index-main-title h1{font-size: 24px;font-weight: 900;}
    .index-main-title p{font-size: 18px;font-weight: 200;color: #999;}
    .index-main-title a{width: 160px;height: 45px;border: 1px solid #C8C8C8;text-align: center;font-size: 16px;line-height: 45px;border-radius: 30px;color:#9B9A9A}
    .index-main-title a:hover{border-color: #F57327;background: #F57327;color:#fff;}
    
    .h3{clear:both;height: 30px;}
    .h5{clear:both;height: 50px;}
    
    .index-works-list{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: flex-start;}
    /**专题**/
    .theme-list{width: 290px; height: 200px; background: #fff; margin: 10px;position: relative;}
    .theme-list img{width: 290px;height: 200px;border-radius: 5px;display: flex;z-index: 1;}
    .theme-list p{position: absolute; bottom: 10px; z-index: 2;width: 280px;font-size: 16px;text-align: center;color: #fff;font-weight: 900;text-align: center; }
    .theme-search{height: 80px;width: 1200px;margin: auto;position: relative;z-index: 100;top: 0px;}
    .theme-info{display: flex;flex-direction: row;justify-content: flex-start;align-items: center;}
    .theme-info .theme-image{width: 290px; height: 200px;}
    .theme-info .theme-image img{width: 290px; height: 200px;}
    .theme-info .theme-keywords{display: flex;flex-direction: column;margin-left: 30px;}
    .theme-info .theme-keywords .remark{font-size: 16px;}
    .theme-info .theme-keywords .keywords-list{margin-top: 30px;}
    .theme-info .theme-keywords .keywords-list a{border: 1px solid #eee;font-size:16px;padding: 10px 20px;margin-right:10px;background: #fff; border-radius: 5px;}
    .theme-info .theme-keywords .keywords-list a:hover{background: #307ADA;color: #fff; border: 1px solid #307ADA;border-radius: 5px;}
    
    .layui-flow-more{clear:both;display: flex; width: 100%; flex-direction: row;flex-wrap:wrap;justify-content: center;align-items: center;}
    .works-list{width: 20%; border-radius: 0px;overflow: hidden; margin: 5px 0px 20px 0px;}
    .works-list img{width: 95%;border-radius: 0px;}
    .works-list .works-down{display: none;position: absolute;width: 200px;height: 200px;z-index: 2;border-radius: 5px;}
    .works-list:hover .works-down{display: block;display: flex;flex-wrap: wrap;align-content: center;justify-content: center;}
    .works-list:hover .works-down a{color: #fff;font-size: 16px; font-weight: 200;width: 100px;text-align: center;}
    .works-list:hover .works-down a i{font-size: 32px;display: block;}
    .works-list:hover .works-down .work-line{border-right: 1px solid #D6D5D5;}
    .works-list:hover .works-down a:hover{color: #ff0000;}
    
    .index-designer{display: flex;flex-direction: row;flex-wrap:wrap;}
    .index-designer .designer-list{height: 340px;width: 20%;}
    .index-designer .designer-list .list-content{background: #fff;border-radius: 5px;height: 280px;margin: 0 10px;padding: 20px 0;}
    .index-designer .designer-list .list-content .head-image {width:96px;position: relative;height:120px;margin-top: 10px;}
    .index-designer .designer-list .list-content .head-image img{width: 96px;height: 96px; border-radius: 50%;position: absolute;z-index: 1;}
    .index-designer .designer-list .list-content .head-image h3{width:96px;height: 30px;border-radius: 15px; background: #F7CCAE;text-align: center; font-size: 14px;line-height: 30px;font-weight: 300;position: absolute;z-index: 2;top: 80px;}
    .index-designer .designer-list .list-content .designer-link{margin: 20px 0;}
    .index-designer .designer-list .list-content .designer-link span{margin: 0 5px;}
    .index-designer .designer-list .list-content .designer-link i{font-size: 18px;margin-right: 5px;}
    .index-designer .designer-list .list-content .designer-url{margin-top: 20px; width: 130px;height: 35px; line-height: 35px; border: 1px solid #999; border-radius: 20px; text-align:center;}
    .index-designer .designer-list .list-content .designer-url:hover{border-color: #F57327;background: #F57327;color:#fff;}

    /**首页结束**/
    
    /**作品列表页**/
    .works-banner{height:240px;background-color: #23abf0;}
    .layui-anim{z-index: 10;position: relative;}
    .search-img {max-height: 200px; padding-top: 20px; overflow: hidden;}
    .search-img img{mix-width: 200px;max-height: 200px;max-width: 400px;}
    .class_name{font-size: 16px;line-height: 45px; font-weight: bold;padding: 10px;}
    .works-cont-swiper{width: 100%;height: 240px;}
    .works-cont-swiper .swiper {width: 100%;height: 240px;}
    .works-search{height: 80px;width: 1200px;margin: auto;position: relative;z-index: 100;top: -180px;}
    
    
    /**栏目页**/
    .position{
        height: 35px;
        border-bottom: 1px solid #D6D5D5;
    }
    .position-cont{
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .position-cont span{margin-right: 10px;}
    .left-cont{
        width: 250px;
        float: left;
        margin-top: 20px;
    }
    .left-cont h1{
        font-size: 18px;
        height: 60px;
        border-bottom: 1px solid #D6D5D5;
        font-weight: 900;
    }
    .cont-menu ul{
        display: flex;
        flex-direction: column;
    }
    .cont-menu ul li{
        height: 60px;
        border-bottom: 1px solid #D6D5D5;
        background: url('../images/jiantou.png') no-repeat right;
    }
    .cont-menu ul .active{
        background: #EDEDED;
    }
    .cont-menu ul li a{
        font-size: 16px;
        font-weight: 200;
        line-height: 60px;
        margin-left: 10px;
    }
    .cont-menu ul .active a{
        color: #DD0000;
        font-weight: 900;
    }
    .right-cont{
        width: 890px;
        float: right;
        height: 100%;
        
    }
    .right-cont h1{
        margin-top: 20px;
        font-size: 28px;
        height: 60px;
        line-height: 40px;
        border-bottom: 1px solid #D6D5D5;
        text-align: center;
    }
    .cont-list{}
    .cont-list ul li{
        padding-left: 30px;
        background: url(../images/dot.png) no-repeat left;
        display: flex;flex-direction: row;justify-content: space-between;
        margin: 25px 0;
    }
    .cont-list ul li a{
        font-size: 16px;
        width: 680px;
        display: -webkit-box!important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical!important;
    }
    .no-cont{
        height: 40px;
        margin: 0 auto;
        margin-top: 100px;
        background: url(../images/no-cont.png) no-repeat center top;
        font-size: 16px;
        text-align: center;
        padding: 120px;
    }
    
    
    .page-num{
        height: 50px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    
    /**分页**/
    .page-box{
        margin: 0 26px;
        margin-top: 30px;
    }
    .page-box:after {
        clear: both;
    }
    .am-fr {
        float: right;
    }
    .am-margin-right {
        margin-right: 1.6rem;
    }
    .pagination-total {
        height: 32px;
        margin-top: 26px;
        margin-bottom: 20px;
    }
    .pagination-total .am-vertical-align-middle {
        font-size: 14px;
        padding: 0 20px;
    }
    .am-vertical-align-middle {
        vertical-align: middle;
    }
    .pagination {
        display: inline-block;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;
    }
    .pagination > li {
        display: inline;
    }
    .pagination > li:first-child > a, .pagination > li:first-child > span {
        margin-left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
        color: #777;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }
    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 4px 12px;
        line-height: 1.42857143;
        color: #000;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        margin: 0 2px;
    }
    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
        z-index: 3;
        color: #fff;
        cursor: default;
        background-color: #F07330;
        border-color: #F07330;
    }
    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 4px 12px;
        line-height: 1.42857143;
        color: #000;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        margin: 0 2px;
        font-size: 15px;
    }
    .pagination > li > a:hover{
        background: #F07330;
        color: #fff;
        border: 1px solid #F07330;
    }
    .pagination > li > span:hover{
        background: #F07330;
        color: #fff;
        border: 1px solid #F07330;
    }
    /**分页结束**/
    
    .list-line{
        height: 1px;
        border-bottom: 1px dashed #D6D5D5;
        width: 100%;
        clear: both;
    }
    
    /**作品详情页**/
    .detail-left{
        width: 700px;
        float: left;
        height: 590px;
        background: #fff;
        border-radius: 10px;
        padding: 0 15px;
        overflow: hidden;
    }
    .detail-left .keywords{
        color: #F57327;
        border-bottom: 1px solid #F4F4F4;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
    }
    .detail-left .keywords a:hover{
        cursor: pointer;
    }
    .detail-left .detail-image{
        height: 450px;
        display: flex;justify-content:center;align-items: center;
        margin: 20px 0;
        position: relative;
    }
    .detail-left .detail-image img{
        max-height: 450px;
    }
    .detail-left .detail-image-up {
        position: absolute;
        z-index: 3;
        background-image: url('../images/logobg-pc.png');
        height: 450px;
        width: 100%;
    }    
    .detail-left .detail-desc{
        border-top: 1px solid #E5E5E5;
        line-height: 45px;
    }
    .detail-left .collect{
        border: 1px solid #307ADA;
        border-radius: 5px;
        height: 34px;
        width: 72px;
        line-height: 34px;
        color: #307ADA;
        text-align: center;
    }
    .detail-right{
        width: 460px;
        float: right;
        height: 360px;
        background: #fff;
        border-radius: 10px;
        padding: 15px 15px 0 15px;
    }
    .detail-right .detail-designer{
        display: flex;flex-direction: row;align-items: center;
        font-size: 16px;
        margin-top: 10px;
    }
    .detail-right .detail-designer .cont-sign{padding-right: 10px;color:#000;font-weight: bold;}
    .detail-right .detail-designer .cont-headimage img{width: 38px;height: 38px;border-radius: 50%;}
    .detail-right .detail-designer .cont-show{padding-left: 10px;color: #666;}
    .detail-right .detail-designer .cont-flex{display:flex; flex-grow: 2;justify-content:right;}
    .detail-right .detail-designer .guanzhu{display:block; border:1px solid #eee;width: 70px;height:32px;line-height:32px;text-align: center;font-size:14px;border-radius: 5px; background: linear-gradient(to bottom, #fff, #eee);}
    .detail-right .detail-designer .guanzhu:hover{background:#F57327;border: 0;color: #fff;}
    .detail-right .detail-designer .show-width{width: 180px;display:flex; flex-direction: row;align-items:center;}
    .detail-right .works-price{height: 50px;text-align: center;background: #F57327;line-height: 50px;display: block;border-radius: 5px;margin: 10px 0;font-size:24px;color:#fff;font-weight: 300;}
    .detail-right .works-price i{font-style:normal;font-size: 14px;}
    .detail-right .works-down{height: 50px;line-height: 50px;margin: 10px 0;}
    .detail-right .works-down a{color: #fff;display:block;background: #307ADA;font-size:16px;color:#fff;font-weight: 300;height: 50px;line-height: 50px;display: flex;flex-direction: row;align-items:center;justify-content:center;border-radius: 5px;}
    .detail-right .works-down a:hover{background: #59B90C;}
    .detail-right .works-down a img{margin-right: 10px;}
    .detail-right .works-sign{display:flex; flex-direction: row;align-items:center;justify-content:space-between;margin-top: 10px;}
    .grayfont{color:#999}
    .works-ad{height: 200px; background: #ccc;float: right;width:490px;margin-top: 15px;overflow: hidden;border-radius: 10px;}
    .works-ad img{width: 490px;height: 200px;overflow: hidden;}
    
    .cont-whrite{background: #fff;}
    .tab-desgin{padding: 10px 0 20px 0;height: 100%; }
    .tab-desgin .layui-tab-title{border: 0 !important;display: flex;flex-direction: row;align-items:center;justify-content:center;margin-bottom: 20px;}
    .tab-desgin .layui-tab-brief>.layui-tab-title .layui-this {color:#000 !important;font-size: 16px;}
    .tab-desgin .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{border-bottom: 4px solid #F57327;}
    .tab-desgin .layui-tab-title li{padding: 0 2px;margin: 0 15px;font-size: 16px;}
    .layui-tab-item{padding: 0 10px;}
   
    .detail-designer{display: flex;flex-direction: row;flex-wrap:wrap;}
    .detail-designer .designer-list{height: 260px;width: 20%;}
    .detail-designer .designer-list .list-content{height: 230px;overflow: hidden;display: flex;align-items:center;justify-content:space-between;width: 95%;background: #ccc;border: 1px solid #FAFAFA;}
    .detail-designer .designer-list .list-content img{width: 100%;}
    
    .paytype{display: flex;flex-direction: column;align-items: center;width: 400px;height: 230px;display: none;}
    .paytype .pay-balance{display: flex;width: 100%; flex-direction: row;align-items:center;justify-content:center;height: 100px;background: #fff;}
    .paytype .pay-balance .balance-type{width: 120px;text-align: center;}
    .paytype .pay-balance .balance-type span{color: #ff0000;font-size: 16px;font-weight: 900}
    .paytype .balance-btn {height: 60px;display: block; width: 80%;margin: 0 auto;}
    .paytype .balance-btn a{color: #fff;background: #307ADA;font-size:16px;color:#fff;font-weight: 300;height: 50px;line-height: 50px;display: flex;flex-direction: row;align-items:center;justify-content:center;border-radius: 5px;}
    .paytype .balance-btn a img{margin-right: 10px;}
    .paytype .balance-btn .greenbtn{background: #59B90C;}
    .paytype .balance-btn .graybtn{background: #F4F4F4;}
    
    /**设计师**/
    .designer-banner{
        background: linear-gradient(180deg, #000, transparent 50%), linear-gradient(90deg, #17d1c6, #336aea 19.84%, #8d639e 39.68%, #eb644c 59.52%, #ea7e11 79.36%, #44b678 99.2%), linear-gradient(0deg, transparent, #000 40%);
        height: 350px;
        display: flex;
        align-items:center;justify-content:center;
    }
    .designer-base{width: 500px; margin: 0 auto;}
    .designer-base .headimage{width: 100px;height: 100px;border-radius: 50%;border: 2px solid #fff;}
    .designer-base .headimage img{width: 100px;height: 100px;}
    .designer-base .grade{padding: 5px 30px;background: #F57327;border-radius: 5px;color: #fff;margin-top: -20px;z-index: 3;}
    .designer-base .nickName{font-size: 24px; font-weight: 900;color: #fff;margin: 20px 0;}
    .designer-base .follow{background: #fff;padding: 5px 20px;border-radius: 5px;}
    .designer-base .follow:hover{cursor:pointer;}
    .designer-base .data-count{width: 200px; display: flex;flex-direction: row;align-items:center;justify-content: space-around;}
    .designer-base .data-count p{margin: 20px 0; width: 100px;color: #fff;text-align: center;line-height: 30px;align-items:center;}
    .designer-base .data-count p i{padding-right: 10px;}
    /**文章**/
    .article-ad{height: 120px;width: 1240px; overflow: hidden;border-radius: 15px;margin-top:20px}
    .article-list-main{border-radius: 10px;margin-top: 20px;display: flex;flex-direction: row;flex-wrap:wrap;}
    .article-list-main .article-list{width: 280px;margin: 15px;display: flex;flex-direction: column;}
    .article-list-main .article-img{width: 280px; height: 160px; background: #F4F4F4; border-radius: 5px;overflow: hidden;overflow: hidden;display: flex;align-items:center;justify-content:center;}
    .article-list-main .article-img img{max-width: 280px;height: 160px;border-radius: 5px;}
    .article-list-main .article-list h3{font-size: 16px;padding: 10px 0;height: 40px;
        display: -webkit-box!important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical!important;font-weight: 400;}
    
    /**详情页**/
    .article-title{
        margin-top: 20px;
        border-bottom: 1px solid #D6D5D5;
        text-align: center;
    }
    .article-title h2{
        font-size: 24px;
        line-height: 40px;
    }
    .article-info{
        margin: 15px 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .article-info span{margin-right: 10px;color: #969696}
    .article-desc{
        margin-top: 20px;
        border: 1px dashed #D6D5D5;
        padding: 20px;
        background: #EDEDED;
        line-height: 24px;
    }
    .article-content{
        margin: 20px 0;
        font-size: 16px;
        line-height: 28px;
        color: #000;
        height: auto;
        overflow: hidden;
        width: 100%;
    }
    .article-content img,.article-content p img{
        max-width: 800px;
    }
    
    /**网站地图**/ 
    .map-list{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .map-list .map-cont{
        width: 23%;
        display: flex;
        flex-direction: column;
    }
    .map-list ul h1{
        font-size: 18px;
    }
    .map-list ul li{
        border: 1px solid #D6D5D5;
        padding: 10px 0;
        text-align: center;
        margin-bottom: 10px;
        font-size: 16px;
    }
    .friendlink{
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 50px;
    }
    .styled-select{
        width: 368px;
        
        height: 34px;
        overflow: hidden;
        background: #fff url(../images/jiantou1.png) no-repeat right;
        background-position: 350px 12px;
    }
    .styled-select select{
        background: transparent;
        width: 368px;
        text-align: center;
        font-weight: 200;
        padding: 5px;
        font-size: 16px;
        border: 1px solid #D6D5D5;
        height: 34px;
        -webkit-appearance: none;
    }
    
    /**用户**/
    .login{height: 600px;background: url(../images/loginbg.jpg) no-repeat center;}
    .login-main{display: flex;justify-content: center;align-items: center;height: 600px;}
    .login-cont{width:800px;height:450px;background: #fff url(../images/loginad.png) no-repeat bottom left;border-radius: 10px;display: flex;justify-content: flex-end;}
    .login-cont .login-info{width: 300px;margin: 40px 40px 0 0;display: flex;flex-direction: column;}
    .login-cont .login-info h1{color:#307ADA;font-weight: 900;text-align: center;}
    .login-cont .login-info .layui-form{padding: 20px 0;}
    .login-cont .login-info .layui-form .layui-input{height: 45px; border-radius: 5px; line-height: 1.5;}
    .login-cont .login-info .layui-form-item .layui-form-checkbox[lay-skin=primary]{margin-top: 0;}
    .login-cont .login-info .layui-form-checkbox[lay-skin=primary] span{padding-riht: 0;}
    .login-cont .login-info .layui-form-checkbox span {padding: 0 0 0 10px;}
    .login-cont .login-info a{color:#307ADA}
    .login-cont .login-info .layui-btn{width: 100%;background-color: #307ADA;font-size: 16px;font-weight: 900;height: 45px;line-height: 45px;border-radius: 5px;margin-top: 20px;}
    
    /**用户中心**/
    .tips{font-size: 14px; line-height: 1.5;}
    .user-left{width: 250px;float:left; min-height: 680px; background:#fff; border-radius: 5px;overflow: hidden;}
    .user-header{height: 195px;background: #307ADA;display: flex;flex-direction: column;align-items: center;color: #fff;font-size: 14px;}
    .user-header h3{margin: 15px 0;font-weight: 900;}
    .user-header img{width:96px;height:96px;border-radius: 50%;}
    .user-header p{margin-top: 10px;}
    .user-balance {height: 110px;font-size: 14px;display: flex;flex-direction: column;align-items: center;}
    .user-balance p{font-weight: 200;}
    .user-balance .user-charge{height: 30px;font-size:14px; line-height: 30px;width: 120px;background: #F57327;border-radius: 30px;text-align: center;color: #fff;}
    .user-balance .user-charge:hover{background: #DB5F16;}
    .user-menu{font-size: 14px;display: block;}
    .user-menu li{height: 45px;line-height:45px;text-align: center;}
    
    .user-menu li a{display: block;height: 45px;line-height:45px;border-left: 5px solid #fff;}
    .user-menu li a:hover{background: #FAFAFA;border-left: 5px solid #F57327;}
    
    .user-menu .active a{background: #FAFAFA;border-left: 5px solid #F57327;}
    .greenbtn a{display:block; font-size:14px; height: 45px;margin: 0 20px;line-height: 45px;background: #59B90C;border-radius: 5px;text-align: center;color:#fff;)}
    .greenbtn a:hover{background: #49950C}
    
    .user-main-cont{float: right;width: 960px;min-height: 680px;background: #fff; border-radius: 5px;}
    .user-class{height: 45px;border-bottom: 1px solid #eee;}
    .user-class h3{margin: 0 20px;font-size: 16px;text-align: center; line-height: 41px;font-size: 16px; border-bottom: 4px solid #F57327;width: 80px;font-weight: 900;}
    .user-cont{margin: 30px;}
    .user-form{font-size: 14px;padding-left: 50px;}
    .user-form .layui-form-item{padding-bottom: 15px;}
    .user-form .layui-input-block {}
    .user-form .layui-input-block .layui-input{width: 300px;}
    .user-form .headimage{width: 68px;height:68px;border-radius: 50%;background-size: 100%; }
    .user-form .disc{position: relative; left: 440px; top: -30px;}
    .user-form .remark{ margin-top: 10px;font-size: 14px; color: #666;}
    .user-form .layui-form-label{font-weight: 900;}
    .user-form .user-form-right{display: flex;flex-direction: row;align-items: center;}
    .layui-form .form-require::after {content: "*";color: #f00;line-height: 18px; }
    .layui-form input[type=text][readonly] {background: #F4F4F4 !important;cursor: text; }

    .user-recharge{width: 550px;margin: 0 auto;}
    .user-recharge .charge-money{}
    .recharge-remark{margin: 40px;color: #666;line-height: 25px;}

    .userlist .layui-table[lay-size=lg] td, .layui-table[lay-size=lg] th {padding: 10px 10px;}
    .userlist .layui-table thead th{color: #000; font-weight: bold;}
    .msg-title{margin-top: 20px;text-align: center;}
    .msg-title h2{font-size: 16px;line-height: 40px;font-weight: bold;}
    .msg-title p{font-size: 14px;line-height: 40px;color: #666;}
    .userlist .user-list-designer{background: #FAFAFA !important;margin-top: 30px !important;}
    
    .user-collect{margin-top: 30px !important;}
    .user-collect .detail-designer .designer-list{height: 160px;width: 20%;}
    .user-collect .detail-designer .designer-list .list-content{background: #F4F4F4;border-radius: 10px;width: 160px;height: 160px;overflow: hidden; margin: 0 10px;overflow: hidden;display: flex;align-items:center;justify-content:center;}
    .user-collect .detail-designer .designer-list .list-content img{max-width: 160px;}
    
    /**订单支付**/
    .pay-order{padding: 50px;height: 400px;font-size: 16px;}
    .pay-order .pay-fail{margin: 20px 0}
    .pay-order .pay-fail i{font-size: 80px; color: #F57327;font-weight: 900;}
    .pay-fail-msg{font-weight: 900;color: #F57327;}
    .pay-order-remark{width: 600px;padding: 10px;border: 1px dashed #F57327;margin: 20px 0;font-size: 14px;text-align: center;}
    
    /**设计师**/
    .step-class{display: flex; flex-direction: row;flex-wrap:wrap;padding: 15px 20px; border-bottom: 1px solid #eee;}
    .step-class p{margin-right: 30px;}
    .step-class p i{margin-left: 20px;}
    .step-class .active{color:#F57327}
    .step-start {margin: 0 auto;display: flex; flex-direction: column;align-items: center;margin: 150px 0;}
    .step-start p{font-size: 16px;color: #666;margin-bottom: 50px;font-weight: bold;}
    .step-check-works {display: flex;flex-direction: row;flex-wrap:wrap;justify-content: center;}
    .step-check-works .check-works-list{width: 200px;text-align: center;}
    .step-check-works .check-works-list img{width: 200px;height: 200px;}
    .step-check-remark{display: flex;flex-direction: column;align-items: center;}
    .step-check-remark p{margin: 30px 0;}
    .step-check-remark .step-check-remark-text{border: 1px dashed #F57327; color: #F57327; padding: 15px 20px;border-radius: 5px;}
    
    .color-green{background: #59B90C;}
    .designer{height: 230px;background: #59B90C;display: flex;flex-direction: column;align-items: center;color: #fff;font-size: 14px;}
    .designer h2{padding: 0 30px;height: 30px;border-radius: 15px; background: #F57327;text-align: center; font-size: 14px;line-height: 30px;font-weight: 300;}
    .designer-balance {height: 150px;font-size: 14px;display: flex;flex-direction: column;align-items: center;}
    .designer-balance p{font-weight: 200;margin-top: 10px;}
    .designer-balance .user-charge{margin-top:10px; height: 30px;font-size:14px; border:1px solid #ccc; line-height: 30px;width: 160px;background: #FFF;border-radius: 30px;text-align: center;color: #000;}
    .designer-balance .user-charge:hover{background: #DB5F16;color: #fff;border:0;}
    .bluebtn a{display:block; font-size:14px; height: 45px;margin: 0 20px;line-height: 45px;background: #307ADA;border-radius: 5px;text-align: center;color:#fff;)}
    .bluebtn a:hover{background: #1454A7}
    
    .designer-right{float: right;width: 960px;min-height: 735px;background: #fff; border-radius: 5px;}
    .designer-info{margin-top: 50px;}
    .designer-count{text-align: center;}
    .designer-count p{padding-bottom: 10px;}
    .designer-count span{color: #F57327;font-weight: 900;}
    .worksupload{width: 200px; margin: 20px auto;}
    
    .workslist{}
    .workslist .layui-table[lay-size=lg] td, .layui-table[lay-size=lg] th{padding: 10px 10px;}
    .designer-class{height: 45px;background: #eee;display: flex;flex-direction: row;flex-wrap:wrap;padding: 0 20px;}
    .designer-class h3{margin: 0 20px;width: 80px; font-size: 16px;text-align: center; line-height: 41px;font-size: 16px;}
    .designer-class .active{ border-bottom: 4px solid #F57327;font-weight: 900;}
    
    .widthdraw_cont{border: 1px solid #eee;display: flex;margin: 40px;height: 200px;}
    .widthdraw_cont .left{width: 50%;border-right: 1px solid #eee;}
    .widthdraw_cont .left .withdraw-money{display: flex;flex-direction: column;align-items: center;margin-top: 50px;}
    .widthdraw_cont .left .withdraw-money p{color:#666}
    .widthdraw_cont .left .withdraw-money span{color:#F57327;font-weight: 900;font-size: 16px;}
    .widthdraw_cont .left .withdraw-form{margin: 20px 40px;}
    .widthdraw_cont .left .layui-input{width: 180px;}
    .widthdraw-remark{margin: 40px;}
    .amcenter{text-align: center !important;}
    .withdraw-count{border: 1px solid #eee;display: flex;height: 100px;width: 600px;margin: 20px auto;border-radius: 10px;}
    .withdraw-count  .left{width: 50%;border-right: 1px solid #eee;}
    .withdraw-count  .left .withdraw-money{display: flex;flex-direction: column;align-items: center;margin-top: 30px;}
    .withdraw-count  .left .withdraw-money p{color:#666}
    .withdraw-count  .left .withdraw-money span{color:#F57327;font-weight: 900;font-size: 16px;}
    .tips-account{padding: 5px 20px;background: #307ADA;margin-left: 10px;border-radius: 15px;color: #fff;}
    .addworksbtn{float:right;width: 200px;text-align: center;color:#fff;background: #307ADA;border-radius: 30px;height: 35px;line-height: 35px;}
    .addworksbtn a{color:#fff;}
    
    .points-msg{width: 100%;display: flex;flex-direction: row;flex-wrap:wrap;height: 45px;border-bottom: 1px solid #eee;border-top: 1px solid #eee;}
    .points-type{margin-left: 50px;line-height: 45px;}
    .points-remark{margin: 20px;display: flex;color: #666}

    .works-upload{margin: 30px 0;}
    .works-upload .user-form .layui-form-item{padding-bottom: 0;}
    .works-upload .works-image{display: flex;flex-direction: row;}
    .works-upload .works-image .works-image-btn{width:100px;height:100px;background: url(../images/upload.png) no-repeat;background-size: 100%;}
    .works-upload .works-image .works-image-remark{display: flex;flex-direction: row;margin-left: 30px;}
    .works-upload .works-image .works-image-remark h3{font-weight: 900;font-size:14px;white-space: nowrap;}
    .works-upload .works-image .works-image-remark p{color: #666;white-space: nowrap;}
    .works-upload .works-image .works-article{margin: 0 30px;}
    .works-upload .works-image .works-article a{color:#FF0000;}
    .works-upload .works-image .works-file-btn{width: 120px;}
    .works-upload .works-image .layui-input{width: 180px;margin-right: 10px;}
    .works-upload .works-price {display: flex;flex-direction: row;align-items: center;}
    .works-upload .works-price .layui-input{width: 100px;margin-right: 10px;}
    .works-upload .works-price .works-price-remark{display: flex;flex-direction: row;margin-left: 20px;}
    .works-upload .works-image .works-price-remark a{color:#FF0000 !important;}
    
    .works-upload .works-publish-read{display: flex;flex-direction: row;align-items: center;}
    .works-upload .works-publish-read p{color:#666;}
    .works-upload .works-publish-read a{color:#FF0000;}
    .works-upload .works-upload-publish .layui-btn{padding: 0px 50px;height: 50px;line-height: 50px;}
    
    /**批量上传**/
    .btnupload{display: flex;flex-direction: column;align-items: center;}
    .btnupload .btnimage{cursor:pointer;width: 200px;height: 200px;border:1px solid #ccc;background: #eee;border-radius: 10px; display: flex;flex-direction: column;align-items: center;}
    .btnupload .btnimage img{margin-top: 60px;}
    .btnupload .btnimage p{font-size: 16px;}
    .btnupload .btnimage:hover{background: #ccc;}
    .btnupload .remark{margin: 20px 0;color: #666;}
    .uploadlist tr td{text-align: center !important;}
    .layui-form .uploadlist input[type=checkbox], .layui-form .uploadlist input[type=radio], .layui-form .uploadlist select {
        display: inline-block;
    }
    .uploadlist .input-keywords{width: 90px;height:25px; border: 1px solid #ccc;margin-bottom:5px;}
    .uploadlist .input-keywords::placeholder {color: #ccc !important;}
    .upload-bottom {display: flex;flex-direction: column;align-items: center;}
    .upload-bottom .layui-btn{width: 160px;height: 45px;line-height: 45px;}
    .upload-bottom .num_pic{padding: 10px;}
    
    /**下载**/
    .order-works-down{width: 400px;height: 150px;display:none;}
    .order-works-down .percent-cont{width:300px;margin: 30px auto;}
    .order-works-down .down-works-no{margin: 0 auto; text-align: center;}
    .page-works-down{width: 1240px;height: 400px;margin: 0 auto;background: #fff;margin-bottom: 30px;}
    .page-works-down .works-no{margin: 0 auto; text-align: center;font-size: 16px;padding: 30px 0;}
    .page-works-down .percent-cont{width: 800px;margin: 0 auto;}
    .page-works-down .works-down-msg{margin: 0 auto; text-align: center;font-size: 16px;color: #999;padding-bottom:30px;}
    .page-works-down .works-down-btn{width: 300px;margin: 0px auto;margin-top: 50px;display: flex;flex-direction: column;align-items: center;}
    

}