.tool{width:1260px;border:0 solid red;margin:0 auto}.tool .name{font-size:20px;font-weight:700;color:#fff;margin:30px 0 20px 0}.tool .tool_box{flex-wrap:wrap;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(200px,auto);grid-gap:17px 17px;flex-direction:column}.tool .tool_box .tool_item{width:300px;color:#fff;background:#1f2937;border-radius:10px;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);transition:transform .3s ease-in-out;cursor:pointer}.tool .tool_box .tool_item .image{width:300px;overflow:hidden}.tool .tool_box .tool_item .image img{width:100%;height:100%}.tool .tool_box .tool_item .title{font-size:16px;margin:16px 10px}.tool .tool_box .tool_item .remark{font-size:14px;color:#9ca3af;margin:16px 10px;line-height:20px}.tool .tool_box .tool_item:hover{transform:translateY(-4px)}.course{width:1260px;height:100%;border:0 solid red;margin:0 auto}.course .name{font-size:20px;font-weight:700;color:#fff;margin:30px 0 20px 0}.course .course_box{margin:0 auto;flex-wrap:wrap;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(200px,auto);grid-gap:18px 18px;flex-direction:column}.course .course_box .item{width:407px;margin:10px 0 16px 0;font-size:14px;cursor:pointer;border-radius:12px;opacity:1;background:linear-gradient(0deg,rgba(0,0,0,.001),rgba(0,0,0,.001)),#1f2937;box-sizing:border-box;border:0 solid #374151;box-shadow:0 1px 2px 0 rgba(0,0,0,.05);transition:transform .3s ease-in-out}.course .course_box .item .img{width:100%;height:165px;z-index:1000;overflow:hidden;border-radius:6px}.course .course_box .item .img .el-image__inner{width:100%;height:100%;transition:transform .3s ease}.course .course_box .item .img .el-image__inner:hover{transform:scale(1.1)}.course .course_box .item div{line-height:24px;margin:0 0 0 0}.course .course_box .item .category_price{display:flex;width:94%;margin:6px auto;justify-content:space-between}.course .course_box .item .category_price .category_list{width:80%;display:flex;justify-content:flex-start;font-size:14px}.course .course_box .item .category_price .category_list .category_list_item{padding:0 6px;border-radius:25px;font-size:12px;margin:4px 4px 0 0}.course .course_box .item .category_price .category_list .color1{color:#1e40af;background:#dbeafe}.course .course_box .item .category_price .category_list .color2{color:#166534;background:#dcfce7}.course .course_box .item .category_price .price{width:20%;text-align:right;color:#1b9af5}.course .course_box .item .title{width:94%;font-size:18px;font-weight:500;line-height:28px;letter-spacing:0;color:#fff;margin:10px auto 2px}.course .course_box .item .sub_title{color:#9e9e9e;font-size:13px;margin:10px 10px;line-height:20px}.course .course_box .item .other{color:#9e9e9e;font-size:13px;display:flex;justify-content:space-between;border:0 solid #ccc;height:24px;line-height:24px;padding:0 0 10px 0;margin-left:10px}.course .course_box .item .other .time{display:flex;align-items:center;color:#1b9af5}.course .course_box .item .other .view_count{display:flex;align-items:center;margin:0 10px 0 0}.course .course_box .item .other .icon{width:14px;margin:0;max-width:100%;height:auto;display:block}.course .course_box .item:hover{transform:translateY(-4px)}.community{width:1260px;border:0 solid red;margin:0 auto}.community .header_name{display:flex;justify-content:flex-start;margin:14px 0 10px 0}.community .header_name .left{width:8%}.community .header_name .left img{width:80px;height:auto}.community .header_name .right{width:92%;color:#fff}.community .header_name .right .name{font-size:22px;font-weight:700;margin:14px 0 10px 0}.community .header_name .right .name span{display:inline-block;font-weight:700;color:#1b9af5;margin:0 0 0 10px}.community .header_name .right .remark{font-size:12px;margin:15px 0 0 0}.community .category{width:100%;display:flex;justify-content:space-between;margin:16px 0 16px 0;color:#fff;font-size:14px;cursor:pointer}.community .category .left{display:flex;justify-content:flex-start;align-items:center}.community .category .left .item{margin:0 14px 0 20px}.community .category .left .active{background:#1b9af5;border-radius:25px;padding:8px 12px}.community .category .right .el-input__inner{background:#1f2937;border-radius:50px;border-color:#374151}.community .content_recommend{width:100%;display:flex;justify-content:space-between;cursor:pointer}.community .content_recommend .left{width:640px;height:350px;border:0 solid red;position:relative;color:#fff;font-size:20px;font-weight:700}.community .content_recommend .left .item{width:640px;height:350px;position:relative;transition:transform .3s ease-in-out}.community .content_recommend .left .item .image{position:absolute;width:640px;height:350px;border-radius:10px}.community .content_recommend .left .item .image img{width:100%;height:100%;border-radius:10px;z-index:99}.community .content_recommend .left .item .image .mask{position:absolute;width:100%;height:100%;top:0;left:0;z-index:100;background:#000;opacity:.1}.community .content_recommend .left .item .title{position:absolute;bottom:55px;left:40px;border:0 solid red;z-index:101;font-size:20px;font-weight:700}.community .content_recommend .left .item .info{position:absolute;bottom:20px;left:40px;border:0 solid red;z-index:101;display:flex;justify-content:flex-start;font-size:14px}.community .content_recommend .left .item .info .image{position:relative;border:0 solid red;width:20px;height:20px}.community .content_recommend .left .item .info .image img{width:14px;height:14px}.community .content_recommend .left .item .info .count{position:relative;border:0 solid red}.community .content_recommend .right{display:flex;justify-content:space-between;flex-flow:wrap;margin:0 0 0 10px;border:0 solid red;width:640px;position:relative;color:#fff;font-size:20px;font-weight:700}.community .content_recommend .right .item{position:relative;width:300px;min-height:170px;border:0 solid red;margin:0 0 8px 0;transition:transform .3s ease-in-out}.community .content_recommend .right .item .image{position:absolute;width:300px;height:170px;border-radius:10px}.community .content_recommend .right .item .image img{width:100%;height:100%;border-radius:10px;z-index:99}.community .content_recommend .right .item .image .mask{position:absolute;width:100%;height:100%;top:0;left:0;z-index:100;background:#000;opacity:.1}.community .content_recommend .right .item .title{position:absolute;font-size:16px;bottom:35px;left:30px}.community .content_recommend .right .item .info{position:absolute;bottom:10px;left:30px;z-index:101;display:flex;justify-content:flex-start;font-size:14px}.community .content_recommend .right .item .info .image{position:relative;border:0 solid red;width:20px;height:20px}.community .content_recommend .right .item .info .image img{width:14px;height:14px}.community .content_recommend .right .item .info .count{position:relative;border:0 solid red}.community .content_recommend .item:hover{transform:translateY(-2px)}.community .article_box{width:100%;border:0 solid red;cursor:pointer}.community .article_box .name{color:#1b9af5;font-size:16px;margin:20px 0 10px 0}.community .article_box .article_list{width:100%;flex-flow:wrap;display:grid;grid-template-columns:repeat(3,1fr);grid-gap:0 20px;flex-direction:column}.community .article_box .article_list .article_item{width:378px;height:90px;background:#1f2937;border-radius:6px;padding:14px;display:flex;justify-content:space-between;color:#fff;margin:0 0 20px 0}.community .article_box .article_list .article_item .image{width:30%;height:90px}.community .article_box .article_list .article_item .image img{width:100%;height:100%}.community .article_box .article_list .article_item .info{width:66%;margin:0 0 0 4%}.community .article_box .article_list .article_item .info .title{font-size:14px;font-weight:700;margin:6px 0 10px 0}.community .article_box .article_list .article_item .info .remark{color:#4b5563;font-size:14px;margin:14px 0 4px 0}.community .article_box .article_list .article_item .info .time_view{display:flex;margin:16px 0 0 0;font-size:14px;color:#9e9e9e}.community .article_box .article_list .article_item .info .time_view .time{display:flex}.community .article_box .article_list .article_item .info .time_view .view{display:flex;margin:0 0 0 20px}.community .article_box .article_list .article_item .info .time_view .icon{width:12px;height:12px;margin:0 4px 0 0}.community .article_box .article_list .article_item .info .time_view .icon img{width:100%;height:100%}