@media screen and (max-width: 980px) {
    body {max-width: 980px;font-size: 14px;color: #000;}
    .main-cont{width: 100%;margin: 0 auto;}
    .margin-top{padding-top: 10px;}
    /**头部开始**/
    .topheader{display:none;}
	.m-header-h{
		height:58px;	
	}
	.h90{
		display:none;
	}
	
	.webheader-box{
		display:none;
	}
	.m-header {
		display:block;
		height: 58px;
		background: #fff;
		width: 100%;
		overflow: hidden;
		position: fixed;
		z-index: 999;
		top:0;
		left:0;
		-moz-box-shadow:0px 5px 7px rgba(119,119,119,0.1); -webkit-box-shadow:0px 5px 7px rgba(119,119,119,0.1); box-shadow:0px 5px 7px rgba(119,119,119,0.1);
	}
	.m-header .m-logo {
		float: left;
		width: 140px;
		margin-left: 10px;
		margin-top: 5px;
	}
	.m-header .m-logo img {
		width: 80%;
		overflow: hidden;
		max-width: 80%;
	}
	.m-header-search-box{
		height:58px;
		width:29px;
		overflow:hidden;
		float:right;
        margin-left:20px;
	}
	.m-header-search-down-icon{
		display:block;
		width:29px;
		height:58px;
		background:url(../images/downm.png) no-repeat center;
		background-size:100%;
	}
	.m-header-search-box-icon{
		display:block;
		width:29px;
		height:58px;
		background:url(../images/searchm.png) no-repeat center;
		background-size:100%;
	}
	
	.m-search-box{
		width:100%;
		position:fixed;
		top:58px;
		left:0;
		height:52px;
		background:#fff;
		z-index:10;
		display:none;
	}
	.m-search-box-warp{
		margin:0 10px;
		overflow:hidden;
		border:1px solid #ddd;
		height:32px;
		margin-top:10px;
		position:relative;
		border-radius:4px;
	}
	.m-search-input{
		width:calc(100% - 32px);
		border:0;
		line-height:32px;
		height:32px;
		font-size:13px;
		color:#000;
		text-align:center;
		outline:none;
	}
	.m-search-submit{
		width:32px;
		height:32px;
		position:absolute;
		right:0px;
		top:0px;
		background:url(../images/icon10.png) no-repeat center;
		background-size:70%;
		border:0;
		outline:none;
	}
	
	
	.m-header .sp_nav {
		width: 38px;
		float: right;
		position: relative;
		cursor: pointer;
		height: 42px;
		margin-top: 15px;
		font-family: '微软雅黑';
		margin-right:10px;
		margin-left:10px;
	}
	.m-header .sp_nav span{display:block;background:#999;width:30px;height:1px;position:absolute;left:10px;transition:all ease 0.35s}
    .m-header .sp_nav span:nth-of-type(1){top:0px}
    .m-header .sp_nav span:nth-of-type(2){top:8px}
    .m-header .sp_nav span:nth-of-type(3){top:16px}
    .m-header .sp_nav span:nth-of-type(4){top:24px}
    .m-header .sp_nav_se span:nth-of-type(1){top:10px;transform:rotate(45deg)}
    .m-header .sp_nav_se span:nth-of-type(2){width:0}
    .m-header .sp_nav_se span:nth-of-type(3){top:10px;transform:rotate(-45deg)}
    .m-header .sp_nav_se span:nth-of-type(4){top:10px;transform:rotate(-45deg)}
	
	.sjj_nav{position:fixed;z-index:9999;background:#fff;width:100%;height:calc(100% - 0px);font-size:14px;line-height:40px;top:-100%;left:0;overflow:auto;overflow-x:hidden;transition:top ease 0.35s;display:block;}
    .nav_show{top:58px;}
    .sjj_nav>ul>li:last-child{overflow:hidden;border-bottom:0}
    .sjj_nav>ul>li:last-child>a{float:left;width:calc(100% - 70px)}
    .sjj_nav ul li span{width:100%;display:block;overflow:hidden;color:#000;font-size:14px;font-weight:600;}
    .sjj_nav ul li i{position:absolute;top:15px;right:0px;border-left:0px #ddd solid;height:30px;padding:0px 7px 0 7px;}
    .sjj_nav ul li i svg{transform:rotate(-90deg);transition:all ease 0.35s;}
    .sjj_nav ul li .sjj_nav_i_se svg{transform:rotate(0deg)}
    .sjj_nav ul li{border-bottom:1px #ddd solid;margin-left:20px;position:relative;line-height:50px;font-size:14px}
    .sjj_nav>ul >li:last-child{border-bottom:1px #ddd solid;}
    .sjj_nav ul li ul li{border-top:1px #ddd solid !important;border-bottom:0;margin-left:20px;position:relative;line-height:50px;font-size:14px}
    .sjj_nav ul li ul{display:none}
    .sjj_nav ul li a{color:#000;width:80%}
    .sjj_nav ul li ul li a{color:#000;display:block;text-align:left;}
    .sjj_nav ul li i svg{width:20px;height:20px;fill:#555;}
    .sjj_nav ul li .sjj_nav_i_se svg{fill:#c9141e}
    .sjj_nav ul li ul li>ul{margin-left:10px}
    
    .top-user{ display: flex;flex-direction: column;align-items: center;}
    .top-user .headimage{margin-top: 20px; text-align: center;}
    .top-user .headimage img{width: 64px; height: 64px; border-radius: 50%;}
    .top-user .top-user-info{flex-direction: column;line-height: 1.5;}
    .top-user .top-user-info .enter-user{height: 35px;width: 200px;line-height: 35px;color:#fff;background:#307ADA;border-radius: 5px;text-align: center;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
    .top-user .top-user-info .balance{margin-top: 30px; font-size: 18px;font-weight: 900;color: #F07330;}
    .top-user .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 .exit-user{margin-top: 30px; width: 160px; height: 35px;background:#F07330;line-height: 35px;border-radius:30px;text-align: center;color:#fff;display: block;}
    .top-user .headimage:hover .top-user-info{display: flex;}

    /**头部结束**/
    /**底部开始**/
    footer{background: #FAFAFA;height: 550px;border-top:1px solid #CCCCCC;}
    .footer-cont{margin: 0 auto;display: flex;flex-direction: column;justify-content: space-between;}
    .footer-left{display: flex;flex-direction: column}
    .footer-right{display: flex;flex-direction: column;justify-content: space-between;margin-top: 0px;border-left: 0px solid #ccc;}
    .footer-menu{margin: 10px 20px;display: none;}
    .footer-menu h3{font-size: 14px;font-weight: 900;}
    .footer-menu ul{padding-top: 0px;}
    .footer-menu li{width:25%; height: 40px;}
    .footer-menu li a{font-size: 12px; }
    .footer-intro{font-size: 12px;margin: 10px 0;color: #000;font-weight: 300;text-align: center;}
    .footer-intro img{width: 120px;}
    .footer-intro span{display: block;font-size:12px;margin: 0px 20px;text-align: left;line-height: 25px;}
    .work-time{margin: 0 auto;display: flex;flex-direction: column;justify-content: space-between;}
    .work-time h3{font-size: 14px;font-weight: 900;text-align: center;}
    .work-time p{font-weight: 300;padding-top: 0px;line-height: 25px;}
    .erweima{width: 160px;text-align: center;margin: 0 auto;}
    .footer-copyright{display:none;}
    .m-footer-copyright{padding-top:15px;text-align: center;font-size: 12px;border-top: 1px solid #dcdcdc;line-height: 35px;margin-top: 20px;}
    .m-ffooter-copyright a{padding: 0 10px;}
    /**公共部分**/
    .line{border-bottom: 1px solid #dcdcdc;}
    
    /**首页开始**/
    /**弹出充值套餐**/
    .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;}
    .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: 90%; margin: auto; position: relative; z-index: 100; top: -400px;}
    .index-search h1{font-size: 24px;font-weight: 900;text-align: center;color: #fff;}
    .index-search h2{ font-size: 16px; font-weight: 200; text-align: center;color: #fff;}    
    .search-form{ width: 100%;background: #fff;height: 60px;border-radius: 5px; margin: 0 auto; margin-top: 30px; display: flex; flex-direction: row;}
    .search-select{width: 150px; display:none; 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: 14px;background-color: #F4F4F4 !important;border: 1px solid #F4F4F4 !important;}
    .search-input{width: 100%; padding: 0px 0 0 0px;border: 1px solid #F4F4F4;border-right: 0;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}
    .search-input .layui-input{border: 0;height: 50px;line-height: 50px;font-size: 14px;padding-top: 10px;}
    .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: 62px;height: 60px;}
    .search-submit{width: 62px; 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: 60px; z-index: 888;width: 100%; background: #fff; border: 1px dashed #ccc; height: 200px; border-radius: 5px;;}
    .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-file-class{top: 60px;}

    .index-main-bg{height: 100%; background: #FAFAFA;display: flex;flex-direction: column;}
    .index-ad{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: space-around;margin-top: 20px;}
    .index-ad a{width: 45%;margin-bottom: 10px;}
    .index-ad .ad-content{width: 100%;border-radius: 10px;}
    .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-intro{margin-top: 30px;display: flex;flex-direction: column;align-items: center;text-align: center;}
    .index-intro h1{font-size: 24px;font-weight: 900;margin: 0 20px;}
    .index-intro h3{font-size: 16px;font-weight: 200;color: #6E6E6E;margin: 0 20px;}
    .redbtn{padding: 10px 50px;font-size: 14px; color: #fff; background: #F57327; border-radius: 30px;}
    .redbtn:hover{background: #DD0000; color: #fff;}
    
    .index-icon{margin-top: 10px;display: flex;flex-direction: row;justify-content: space-between; margin-bottom: 30px;}
    .index-icon a{width: 30%;display: flex;flex-direction: column;align-items: center;}
    .index-icon .index-icon-cont{display: flex;flex-direction: column;align-items: center;}
    .index-icon .index-icon-cont .icon-cont-left{text-align: center;}
    .index-icon .index-icon-cont h1{font-size: 14px;font-weight: 900;}
    .index-icon .index-icon-cont p{font-size: 12px;font-weight: 200;}
    
    .index-main-title{margin-top: 30px; margin-bottom: 50px;}
    .index-main-title h1{font-size: 24px;font-weight: 900;}
    .index-main-title p{font-size: 16px;font-weight: 200;}
    .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;}
    
    .index-works-list{display: flex;flex-direction: row;flex-wrap:wrap;justify-content: flex-start;}
    /**专题**/
    .theme-list{width: 50%; text-align: center; margin-bottom: 10px;position: relative;}
    .theme-list img{width: 90%;height: 120px; border-radius: 5px;display: flex;z-index: 1;background: #fff;margin-left: 5%;}
    .theme-list p{position: absolute; bottom: 10px; z-index: 2;width: 100%;font-size: 16px;text-align: center;color: #fff;font-weight: 900;text-align: center; }
    .theme-search{height: 80px;margin: auto;position: relative;z-index: 100;top: 0px;margin: 0 20px;}
    .m-top-height{margin-top: 60px;}
    .theme-info{display: flex;flex-direction: row;justify-content: flex-start;align-items: center;margin: 0 5px;margin-bottom: 30px;}
    .theme-info .theme-image{width: 120px; height: 80px;}
    .theme-info .theme-image img{width: 120px; height: 80px;}
    .theme-info .theme-keywords{display: flex;flex-direction: column;margin-left: 10px;}
    .theme-info .theme-keywords .remark{font-size: 14px;}
    .theme-info .theme-keywords .keywords-list{margin-top: 10px;}
    .theme-info .theme-keywords .keywords-list a{border: 1px solid #eee;font-size:12px;padding: 10px 20px;margin-right:5px;background: #fff; border-radius: 5px;}
    .theme-info .theme-keywords .keywords-list a:hover{background: #307ADA;color: #fff; border: 1px solid #307ADA;border-radius: 5px;}
    
    .works-list{width: 50%; text-align: center; overflow: hidden;margin-bottom: 10px;}
    .works-list img{width: 95%;}

    
    .index-designer{display: flex;flex-direction: row;flex-wrap:wrap;}
    .index-designer .designer-list{height: 340px;width: 50%;}
    .index-designer .designer-list .list-content{background: #fff;border-radius: 10px;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 10px;}
    .index-designer .designer-list .list-content .designer-link i{font-size: 18px;margin-right: 10px;}
    .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-top: 10px;padding-left: 20px;}
    .works-cont-swiper{width: 100%;height: 240px;}
    .works-cont-swiper .swiper {width: 100%;height: 240px;}
    .works-search{height: 80px;width: 90%;margin: auto;position: relative;z-index: 100;top: -160px;}
    

    
    
    /**栏目页**/
    .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: #23abf0;
        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;
    }
    .h3{display: none;}
    /**作品详情页**/
    .detail-left{
        width: 100%;
        display: flex;flex-direction: column;
        background: #fff;
        border-radius: 0px;
        overflow: hidden;
    }
    .detail-left .keywords{
        color: #F57327;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        margin-left: 10px;
    }
    .detail-left .keywords a:hover{
        cursor: pointer;
    }
    .detail-left .detail-image{
        display: flex;align-items: center;justify-content:center;
        margin: 0px 0;
        position: relative;
    }
    .detail-left .detail-image img{
        width: 100%;
    }
    .detail-left .detail-image-up {
        position: absolute;
        z-index: 3;
        background-image: url('../images/logobg.png');
        background-size: 100%;
        width: 100%;
        height: 100%;
    }  
    .detail-left .detail-desc{
        line-height: 45px;
        margin: 10px 10px;
    }
    .detail-left .detail-desc p{line-height: 20px;font-size: 12px;margin-right: 30px;}
    .detail-left .collect{
        border: 1px solid #307ADA;
        border-radius: 5px;
        height: 34px;
        width: 72px;
        line-height: 34px;
        color: #307ADA;
        text-align: center;
        font-size: 12px;
    }
    .detail-right{
        padding: 0 10px;
        display: flex;flex-direction: column;
        background: #fff;
        padding-bottom: 30px;
    }
    .detail-right .detail-designer{
        display: flex;flex-direction: row;align-items: center;
        font-size: 14px;
        margin-top: 10px;
    }
    .detail-right .detail-designer .cont-sign{padding-right: 10px;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:#999;}
    .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: #267CBA;}
    .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;margin-top: 15px;overflow: hidden;}
    .works-ad img{height: 200px;overflow: hidden;}
    .h5{display: none;}
    
    
    .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;}
    .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;}
    
    
    .detail-designer{display: flex;flex-direction: row;flex-wrap:wrap;margin-top: 30px;}
    .detail-designer .designer-list{width: 50%;}
    .detail-designer .designer-list .list-content{margin: 0 5px;overflow: hidden;display: flex;align-items:center;justify-content:center;margin-bottom: 10px;}
    .detail-designer .designer-list .list-content img{width: 95%;border: 1px solid #fafafa}
    
    .paytype{display: flex;flex-direction: column;align-items: center;height: 250px;}
    .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%;}
    .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;margin-top: 60px;}
    .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: 100%; overflow: hidden;margin-top:70px}
    .article-list-main{margin-top: 0px;display: flex;flex-direction: row;flex-wrap:wrap; margin: 10px;}
    .article-list-main .article-list{width:50%; display: flex;flex-direction: column; justify-content: center;align-items:center;}
    .article-list-main .article-img{margin: 10px; height:100px; background: #F4F4F4; overflow: hidden;display: flex;align-items:center;justify-content:center;}
    .article-list-main .article-img img{width: 100%; }
    .article-list-main .article-list h3{font-size: 14px;padding: 10px 10px;height: 40px;
        display: -webkit-box!important;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical!important;}
    
    /**详情页**/
    .article-title{
        margin-top: 0px;
        border-bottom: 1px solid #D6D5D5;
        text-align: center;
    }
    .article-title h2{
        font-size: 18px;
        font-weight: 900;
    }
    .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:95%;height:450px;background: #fff;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: #f7f7f7 !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-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;}
    
    .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;align-items: center;}
    .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;}
    .works-upload .works-image .works-image-remark p{color: #666;}
    .works-upload .works-image .works-article{margin-left: 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{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;}
    .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;}

}