.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{*+height:1%;}

.layui-container{
    width: 1330px;
}
.bg{
    background: #f8f8f8;
}
.slh {
    display: -webkit-box; /* 必须设置display属性为-webkit-box */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
    -webkit-line-clamp: 2; /* 限制显示两行 */
    -webkit-box-orient: vertical; /* 垂直方向上的换行 */
}
/*分页*/
.pages{display: inline-block}
/*.pages:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.pages{*+height:1%;}*/
.pages ul{text-align: left}
.pages ul li{display:inline-block;height:28px;border:1px solid #e2e2e2;background-color:#fff;color:#333;font-size:14px;line-height:28px;margin-left: -1px;}
.pages ul li a,.pages ul li span{display:block;padding:0 15px;}
.pages ul li.disabled{color:#d2d2d2;}
.pages ul li.active{color:#fff;border:1px solid #009688;background-color:#009688;}

/*修改layui主题*/
.layui-btn-danger {
    background-color: #f56c6c;
}
.layui-btn {
    border-radius: 3px;
}
table[lay-skin=line]{
    border-width: 0!important; /*不要四周边框*/
}

.xn-body{
    padding: 30px;
}
.xn-title{
    font-size: 18px;
    color: #333;
}

.header{
    background: #FFFFFF;
    z-index: 1000;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 60px;
    box-shadow: 0 1px 8px rgb(0 0 0 / 8%);
}
.header .header-box{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .header-box .logo{

}
.header .header-box .logo img{
    height: 35px;
}
.header-box .menu-box{
    display: flex;
}
.header-box .menu{
    height: 100%;
}
.header-box .menu ul{
    margin-right: 30px;
}
.header-box .menu ul li{
    display: inline-block;

}
.header-box .menu ul li a{
    display: block;
    height: 60px;
    line-height: 60px;
    padding:0 20px;
    font-size: 14px;
}
.header-box .menu ul li:hover a, .header-box .menu ul li.active a{
    background: #f8f8f8;
    color: #009688;
}
.header-box .user{
    display: inline-block;
    float: right;
    line-height: 60px;
    font-size: 14px;
}
.header-box .user a{
    padding: 0 2px;
    display: inline-block;
}
.header-box .user a:hover{
    color: #009688;
}
.header-box .user .avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.body{
    margin-top: 90px;
    min-width: 1440px;
}

.banner{
    height: 320px;
}
.banner.home{background: url(../images/nav_img2.jpg) no-repeat center top; background-size: cover;}
.banner .title p {
    /*color: #606060;*/
    font-size: 64px;
    text-align: center;
    line-height: 64px;
    letter-spacing: 5px;
    background: linear-gradient(to right, rgb(74, 222, 128) 25%, rgb(37, 99, 235) 80%);
    -webkit-background-clip: text;
    color: transparent;
}
.banner .title .demo{
    text-align: center;
}
/*.banner .title .demo a{
    background: #16baaa;
    color: #FFFFFF;
    padding: 6px 20px;
    margin:0 4px;
    border-radius: 3px;
}*/

.banner .title.active {
    padding-top: 120px;
    transition: 1.5s;
}
.banner .title p.en {
    font-size: 20px;
    letter-spacing: 1.5px;
}
.banner.download{background: url(../images/nav_img2.jpg) no-repeat center top; background-size: cover;}
.download .download-btns{
    padding-top: 50px;
    text-align: center;
}
.download .download-btns a{
    display: inline-block;
    height: 80px;
    line-height: 80px;
    padding: 0 40px;
    background: #16baaa;
    color: #FFFFFF;
    font-size: 28px;
    border-radius: 8px;
    margin: 0 30px;
}
.download .yanshi{
    text-align: center;
    padding-top: 20px;
    font-size: 20px;
    color: #999999;
}

.p-ts{
    padding-top: 50px;
    padding-bottom: 50px;
}
.p-ts .title{
    text-align: center;
    font-size: 32px;
    padding-bottom: 15px;
    color: #333333;
}
.p-ts .en{
    text-align: center;
    font-size: 15px;
    color: #999999;
    text-transform:uppercase;
}
.product-item{
    background: #FFFFFF;
    padding: 40px;
    text-align: center;
    /*box-shadow: 0 5px 10px rgb(0 0 0 / 5%);*/
    border: 1px #EEEEEE solid;
}
.product-item:hover{
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
}
.product-item .icon{
    padding-bottom: 20px;
}
.product-item .icon img{
    height: 58px;
}
.product-item .label{
    font-size: 24px;
    padding-bottom: 20px;
}
.product-item .text{
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 1px;
    text-align: left;
    color: #999999;
}
.gnmk{
    background: #03bdac;
    margin-top: 30px;
    padding-bottom: 50px;
}
.gnmk-box .item{
    color: #FFFFFF;
    text-align: center;
}
.gnmk-box .item .t{
    padding: 20px 0;
    font-size: 24px;
}
.gnmk-box .item .c{
    font-size: 16px;
    line-height: 24px;
    padding: 0 30px;
}
.gnmk-box .icon{
    margin: auto;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5%;
}
.gnmk-box .icon.icon1{
    background: #04696f;
}
.gnmk-box .icon.icon2{
    background: #00809f;
}
.gnmk-box .icon.icon3{
    background: #00e1d9;
}
.gnmk-box .icon.icon4{
    background: #046f2b;
}
.gnmk-box .icon.icon5{
    background: #ff9800;
}
.gnmk-box .icon.icon6{
    background: #ff5722;
}

.gnmk-box .icon img{
    width: 40px;
}

.app-item{
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgb(0 0 0 / 7%);
}
.app-item:hover{
    background: #FFFFFF;
    box-shadow: 0 2px 12px rgb(0 0 0 / 15%);
}
.app-item .image img{
    width: 100%;
    height: 200px;
}
.app-item .name{
    padding:10px 10px 0 10px;
    font-size: 16px;
    /*overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;*/
}
.app-item .info{
    padding:10px;
    display: flex;
    justify-content: space-between;
}
.app-item .info .download{
    color: #999999;
    font-size: 15px;
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,'Microsoft Yahei',Arial,sans-serif;
}
.app-item .info .download img{
    height: 22px;
}
.app-item .info .price{
    color: #ff0000;
    font-size: 15px;
    font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,'Microsoft Yahei',Arial,sans-serif;
}
.app-item .info .price.free{
    color: #16baaa;
}
.app-item .info .btns-box{

}
.app-item .info .btns-box a{
    padding:0 15px;
    height: 24px;
    line-height: 24px;
}

.user-left{
    float: left;
    width: 260px;
}
.user-right{
    float: right;
    width: 1040px;
}
.user-body{
    padding: 30px;
}
.user-title{
    font-size: 18px;
    color: #333;
    display: flex;
    justify-content: space-between;
}
.user-content{
    padding-top: 25px;
}

.user-info{
    padding-top: 25px;
    display: flex;
    padding-bottom: 30px;
}
.user-info .image-box{
    width: 120px;
    flex: 0 0 auto ;
}
.user-info .image-box img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
}
.user-info .info{
    flex: 1 1 auto;
    margin-left: 30px;
}
.user-info .info span{
    line-height: 40px;
    display: inline-block;
}
.user-info .info span.t{
    width: 70px;
}
.user-info .info span.c{
    color: #16b777;
}

.addon-cate{
    background: #FFFFFF;
    padding: 10px;
    margin-bottom: 30px;
}
.addon-cate .item{
    display: flex;
    padding: 15px;
}
.addon-cate .item span{
    padding-right: 30px;
    color: #999999;
}
.addon-cate .item ul{
    display: flex;
}
.addon-cate .item ul li{
    margin-right: 40px;
}
.addon-cate .item ul li a.active{
    color: #00bdab;
}
.detail-title{
    font-size: 28px;
    padding: 20px 20px;
}
.detail-info{

}
.detail-info .tags{

}
.detail-info .tags span{
    margin-right: 8px;
}
.detail-info .bigimg{
    width: 380px;
    height: 320px;
    box-shadow: 0 2px 12px rgb(0 0 0 / 17%);
    display: flex;
    align-items: center;
}
.detail-info .bigimg .img{
    width: 100%;
    max-height:300px;
}
.detail-info .smallimg {
    margin-top: 15px;
}
.detail-info .smallimg .img{
    width: 73px;
    height: 61px;
    /*box-shadow: 0 2px 5px rgb(0 0 0 / 30%);*/
}

.detail-info .title{
    font-size: 18px;
    line-height: 32px;
    /*font-weight: bold;*/
    display: flex;
    align-items: center;
}
.detail-info .title .badge{
    display: inline-block;
    color: #16baaa;
    border: 1px #16baaa30 solid;
    background: rgb(199 250 245 / 38%);
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 5px;
}
.detail-info .price-box{
    background: #eeeeeea3;
    padding: 20px 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.detail-info .row{
    display: flex;
    align-items: center;
    padding: 3px 0;
}
.detail-info .row .t{
    color: #999999;
    display: inline-block;
    width: 80px;
}
.detail-info .row .c{
    color: #333333;
    padding-left: 20px;
}
.detail-info .row .c.blue{
    color: #1e9fff;
}

.detail-info .row .price{
    color: #f56c6c;
    font-size: 24px;
    font-weight: bold;
}
.detail-info .row .free{
    color: #16baaa;
    font-size: 24px;
    font-weight: bold;
}

.detail-info .info{
    flex: 1 1 auto;

}
.detail-info .info span{
    line-height: 40px;
    display: inline-block;
}
.detail-info .info span.t{
    width: 70px;
}
.detail-info .info span.c{
    color: #16b777;
}

.dev{

}
.dev .avatar{
    text-align: center;
}
.dev .avatar img{
    width: 100px;
    height: 100px;
    border-radius: 4px;
}
.dev .name{
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding-top: 5px;
}
.dev .contacts{
    color: #999;
}
.dev .contacts .item{
    color: #999;
}
.dev .contacts .item span{
    color: #999;
}
.applist{

}
.applist .item{
    display: flex;
    margin-bottom: 20px;
}
.applist .item .img{
    width: 80px;
    height: 60px;
}
.applist .item .img img{
    width: 100%;
    height: 100%;
}
.applist .item .info{
    flex: 1;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.applist .item .info .title{
    font-size: 14px;
    font-weight: bold;
}
.applist .item .info .param{
    font-size: 12px;
    color: #999999;
    display: flex;
    justify-content: space-between;
}

.pay0{
    color: #ff0000;
}
.pay1{
    color: #00a332;
}
.status0{
    color: #999999;
}


.right-info{

}
.right-info span{

}

.footer{
    background: #333333;
    padding: 40px 0 50px 0;
    color: #CCCCCC;
    line-height: 30px;
    margin-top: 50px;
}
.footer a{
    color: #CCCCCC;
}
.cont{
    text-align: center;
}
.copyright{
    text-align: center;
}