@media screen and (min-width:751px) {

    /* blog页面的css */
    .blog-content {
        width: 1400px;
        margin: auto;
        margin-top: 20px;
        padding-bottom: 30px;
        display: flex;
        justify-content: space-between;
    }

    .blog-content ul {
        padding: 5px 30px;
    }

    .blog-content ul li {
        list-style: disc;
    }

    .blog-content h2 {
        margin: 25px auto;
    }

    .blog-content .blog-left {
        width: 1150px;
    }

    .blog-left .left-blog {
        display: flex;
        flex-wrap: wrap;
    }

    .blog-left .left-blog div {
        width: 45%;
        margin-left: 10%;
        margin-top: 20px;
    }

    .blog-left .left-blog div:nth-child(2n+1) {
        margin-left: 0;
    }

    .blog-left .left-blog .blog-img {
        width: 100%;
    }

    .blog-left .left-blog .blog-img img {
        width: 100%;
    }

    .blog-left .left-blog .blog-two {
        height: 52px;
        line-height: 26px;
        margin-top: 10px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .blog-left .left-blog .blog-two a {
        text-decoration: none;
        color: #000000;
    }

    .blog-left .left-blog .blog-three {
        height: 78px;
        line-height: 26px;
        margin-top: 5px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .blog-left .left-blog .blog-three a {
        text-decoration: none;
        color: #666;
    }

    .blog-left .left-blog .blog-four {
        padding: 10px;
        margin-top: 10px;
        border-top: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
    }

    .blog-left .left-blog .blog-four img {
        cursor: pointer;
    }

    .blog-right {
        width: 230px;
    }

    .blog-right .blog-search {
        height: 35px;
        padding: 0 10px;
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    .blog-right .blog-search input {
        width: 100%;
        height: 30px;
        outline: none;
        border: none;
    }

    .blog-right .blog-search img {
        cursor: pointer;
    }

    .blog-right .blog-title {
        margin-top: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: bold;
        font-size: 14px;
    }

    .blog-right .blog-title span {
        display: inline-block;
        width: 25%;
        height: 2px;
        background-color: #000;
    }

    .blog-right .right-about {
        margin-top: 10px;
    }

    .blog-right .right-about li {
        list-style: none;
        line-height: 26px;
        margin-top: 5px;
    }

    .blog-right .right-about li a {
        color: #fc533b;
        padding: 5px 10px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .blog-right .right-about li a:hover {
        background-color: #ff2566;
        color: #fff;
    }

    .blog-right .right-about .blog-right-select {
        background-color: #ff2566;
        color: #fff;
    }

    .right-tags a {
        text-decoration: none;
        display: inline-block;
        padding: 2px 10px;
        border-radius: 3px;
        border: 1px solid #ccc;
        color: #fc533b;
        font-size: 12px;
        margin-top: 20px;
        margin-right: 10px;
    }

    .right-most li {
        list-style: none;
        margin-top: 15px;
        font-size: 12px;
        display: flex;
        align-items: center;
    }

    .right-most li span {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 15px;
        color: #fff;
        background-color: #ff2566;
        margin-right: 10px;
    }

    .right-most li span img {
        margin-right: 5px;
        margin-top: -2px;
    }

    .right-most li a {
        text-decoration: none;
        color: #ff2566;
    }

    /* info的css */
    .left-info {
        margin-top: 20px;
        line-height: 1.6;
        padding-bottom: 30px;
    }

    .head-block{
        position: relative;
        height: 300px;
        background-size: cover;
        background-position: center;
    }
    
    .left-info .head-figure {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 20px;
        display: flex;
        align-items: flex-end;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }
    
    .head-figure h1{
        font-size: 36px;
        color: #fff;
        line-height: 42px;
    }
    
    .left-info blockquote{
        font-style: italic;
        margin-top: 10px;
        padding: 10px;
        background: #ebebeb;
        color: #88b;
        border-left: 5px solid #ff3f68;
    }

    .left-info p {
        width: 100%;
        margin-top: 10px;
    }
    .left-info p a {
        color: #fc533b;
    }

    .left-info p:first-child {
        margin-top: 0;
    }

    .left-info p img {
        width: 50%;
    }

    .info-title {
        margin-top: 20px;
    }

    .info-title span {
        display: inline-block;
        padding: 2px 15px;
        border-radius: 3px;
        background-color: #ff2566;
        color: #fff;
    }

    .info-author {
        padding: 25px 0;
        display: flex;
        /* border-bottom: 1px solid #ccc */
    }

    .info-author div:first-child {
        width: 64px;
        margin-right: 10px;
    }

    .info-author div:first-child img {
        width: 100%;
    }

    .info-author div p {
        line-height: 26px;
    }

    .info-author div p span {
        color: #fc533b;
    }

    .info-author div p:last-child {
        color: #fc533b;
    }

    .info-star {
        padding: 20px 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
    }

    .info-relevant {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .info-relevant div {
        width: 23%;
    }

    .info-relevant div .relevant-img {
        width: 100%;
    }

    .info-relevant div .relevant-img img {
        width: 100%;
    }

    .info-relevant div .relevant-two {
        margin-top: 5px;
        line-height: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .info-go {
        margin-top: 20px;
        padding-bottom: 20px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
    }

    .info-go a {
        text-decoration: none;
        color: #666;
    }

    .info-go a:hover {
        color: #000;
    }

    .not-comment {
        margin-top: 20px;
        text-align: center;
    }

    .info-comment {
        margin-top: 20px;
        display: flex;
        padding-bottom: 30px;
        border-bottom: 1px solid #ccc;
    }

    .info-comment .comment-left {
        width: 80px;
        margin-right: 20px;
    }

    .info-comment .comment-left img {
        width: 100%;
    }

    .info-comment .comment-right {
        width: 80%;
    }

    .info-comment .comment-right p:first-child .commnet-time {
        margin-left: 30px;
        color: #333;
        font-size: 14px;
    }

    .info-comment .comment-right p:first-child img {
        width: 20px;
        margin-top: -3px;
    }

    .info-comment .comment-right p:nth-child(2) {
        margin-top: 5px;
        line-height: 26px;
        font-size: 14px;
        color: #333;
    }

    .info-comment .comment-right p:last-child span {
        display: inline-block;
        padding: 1px 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
        color: #666;
        font-size: 13px;
        margin-right: 10px;
    }

    .info-form .form-text{
        color: #333;
        font-size: 14px;
        margin-top: 10px;
    }
    .info-form .form-text span{
        color: red;
    }
    .info-form .form-text textarea{
        width: 100%;
        height: 130px;
        box-sizing: border-box;
        padding: 10px;
        background-color: #cfcfcf;
        border: none;
        outline: none;
        resize: none;
        transition: all .3s;
    }
    
    .info-form .form-text input{
        width: 250px;
        height: 35px;
        text-indent: 10px;
        background-color: #cfcfcf;
        border: 1px solid #cfcfcf;
        outline: none;
        transition: all .3s;
    }

    .info-form .form-text textarea:focus,
    .info-form .form-text input:focus{
        border: 1px solid #ff7171;
        box-shadow: 0px 0px 10px 5px #ff7171;
    }
    .info-form .form-checked{
        margin-top: 10px;
    }
    .info-form .form-a span{
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        border-radius: 20px;
        color: #fff;
        background-color: #ff2566;
        cursor: pointer;
    }

    .cloumn {
        column-count: 3;
        column-gap: 20px;
    }


    /* video的css */
    .left-video {
        overflow: hidden;
        margin-bottom: 15px;
        line-height: 26px;
    }

    .left-video div {
        background-color: #000;
        text-align: center;
        position: relative;
    }

    .left-video div video {
        width: 100%;
        height: 100%;
    }

    .left-video div img{
        width: 100%;
        max-width: 100%;
    }

    .left-video div .video-css {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .left-video div .video-css .video-play {
        display: inline-block;
        padding: 3px 15px;
        border-radius: 5px;
        border: 1px solid #fff;
        line-height: 20px;
        cursor: pointer;
    }

    .left-video div .video-css button {
        padding: 4px 10px;
        border: 1px solid #fff;
        color: #fff;
        margin-left: 15px;
        background-color: transparent;
        border-radius: 3px;
        cursor: pointer;
    }

    .left-video .video-two {
        margin-top: 5px;
        font-size: 20px;
        font-weight: bold;
    }

    .left-video .video-three {
        margin-top: 5px;
    }

    .left-video .video-three a {
        color: #999;
    }

    .left-video .video-four {
        margin-top: 10px;
        color: #666;
        display: flex;
        justify-content: space-between;
    }

    .left-video .video-four img {
        margin-top: -3px;
        margin-right: 5px;
    }

    .left-video .video-four span {
        margin-right: 10px;
    }

    .video-keyword a {
        display: inline-block;
        padding: 2px 10px;
        background-color: #ff2566;
        color: #fff;
        border-radius: 3px;
        margin-right: 10px;
        margin-top: 10px;
    }

    .right-video {
        margin-top: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
    }

    .right-video .right-video-img {
        width: 100%;
    }

    .right-video .right-video-img img {
        width: 100%;
    }

    .right-video .right-video-two {
        margin-top: 10px;
        line-height: 24px;
        font-size: 16px;
        font-weight: bold;
    }

    .right-video .right-video-three {
        margin-top: 5px;
        line-height: 24px;
        font-size: 13px;
    }

    .right-video .right-video-three a {
        color: #999;
    }
}


@media screen and (max-width:750px) {
    
    .blog-right,
    .mod-relevant,
    .info-relevant{
        display: none;
    }

    /* blog.css */
    .blog-left .left-blog {
        margin: 0 10px;
        display: flex;
        flex-wrap: wrap;
    }

    .left-blog>img{
        max-width: 100%;
    }

    .blog-left .left-blog div {
        width: 48.5%;
        margin-left: 3%;
    }

    .blog-left .left-blog div:nth-child(2n+1) {
        margin-left: 0;
    }

    .blog-left .left-blog .blog-img {
        width: 100%;
        max-height: 235px;
        overflow: hidden;
    }

    .blog-left .left-blog .blog-img img {
        width: 100%;
        object-fit: cover;
    }

    .blog-left .left-blog .blog-two {
        height: 36px;
        line-height: 22px;
        margin-top: 10px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .blog-left .left-blog .blog-two a {
        text-decoration: none;
        color: #000000;
    }

    .blog-left .left-blog .blog-three {
        height: 66px;
        width: 100%;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    .blog-left .left-blog .blog-three a {
        text-decoration: none;
        color: #666;
    }

    .blog-left .left-blog .blog-four {
        padding: 10px;
        margin-top: 10px;
        border-top: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #666;
    }

    .blog-left .left-blog .blog-four img {
        cursor: pointer;
    }

    .left-info {
        margin: 20px 10px 0;
        line-height: 26px;
        /* padding-bottom: 30px; */
    }

    .left-info .head-block{
        position: relative;
        height: 120px;
        background-size: cover;
        background-position: center;
    }

    .left-info .head-figure{
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 20px;
        display: flex;
        align-items: flex-end;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(15px);
    }

    .left-info .head-figure h1 {
        font-size: 20px;
        color: #fff;
    }

    .left-info p {
        width: 100%;
        margin-top: 10px;
        color: #666;
    }
    .left-info p a {
        color: #fc533b;
    }

    .left-info p:first-child {
        margin-top: 0;
    }

    .left-info p img {
        width: 100%;
    }

    .info-title {
        margin: 20px 10px 0;
        border-bottom: 1px solid #ff2566;
    }

    .info-title span {
        display: inline-block;
        padding: 2px 15px;
        border-radius: 3px 3px 0 0;
        background-color: #ff2566;
        
        color: #fff;
    }

    .info-author {
        margin: 0 10px;
        padding: 15px 0;
        display: flex;
        border-bottom: 1px solid #ccc
    }

    .info-author div:first-child {
        width: 64px;
        margin-right: 10px;
    }

    .info-author div:first-child img {
        width: 100%;
    }

    .info-author div p {
        line-height: 26px;
    }

    .info-author div p span {
        color: #fc533b;
    }

    .info-author div p:last-child {
        color: #fc533b;
    }

    .info-star {
        margin: 0 10px;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
    }

    

    .info-go {
        margin: 10px 10px  0;
    }

    .info-go a {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        background-color: #f1f2f3;
        margin-top: 10px;
        text-decoration: none;
        color: #666;
    }

    .info-go a:hover {
        color: #000;
    }

    .not-comment {
        margin: 20px 10px 0;
        text-align: center;
    }
    .not-comment p{
        width: 100%;
    }
    .not-comment p img{
        width: 100%;
    }

    .info-comment {
        margin: 20px 10px 0;
        display: flex;
        padding-bottom: 30px;
        border-bottom: 1px solid #ccc;
    }

    .info-comment .comment-left {
        width: 80px;
        margin-right: 20px;
    }

    .info-comment .comment-left img {
        width: 100%;
    }

    .info-comment .comment-right {
        width: 80%;
    }

    .info-comment .comment-right p:first-child .commnet-time {
        margin-left: 30px;
        color: #333;
        font-size: 14px;
    }

    .info-comment .comment-right p:first-child img {
        width: 20px;
        margin-top: -3px;
    }

    .info-comment .comment-right p:nth-child(2) {
        margin-top: 5px;
        line-height: 26px;
        font-size: 14px;
        color: #333;
    }

    .info-comment .comment-right p:last-child span {
        display: inline-block;
        padding: 1px 15px;
        border: 1px solid #ccc;
        border-radius: 3px;
        color: #666;
        font-size: 13px;
        margin-right: 10px;
    }
    .info-form{
        margin: 0 10px;
    }
    .info-form .form-text {
        color: #333;
        font-size: 14px;
        margin-top: 10px;
    }

    .info-form .form-text span {
        color: red;
    }

    .info-form .form-text textarea {
        width: 100%;
        height: 130px;
        box-sizing: border-box;
        padding: 10px;
        background-color: #f1f2f3;
        border: none;
        outline: none;
        resize: none;
    }

    .info-form .form-text input {
        width: 100%;
        height: 35px;
        text-indent: 10px;
        background-color: #f1f2f3;
        border: none;
        outline: none;
    }

    .info-form .form-checked {
        margin-top: 10px;
    }

    .info-form .form-a span {
        display: inline-block;
        margin-top: 20px;
        padding: 10px 20px;
        border-radius: 20px;
        color: #fff;
        background-color: #ff2566;
        cursor: pointer;
    }

    /* video.css */
    .video-div{
        margin: 0 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .left-video {
        width: 47.5%;
        margin-top: 20px;
        line-height: 26px;
    }

    .left-video div {
        width: 100%;
        height: 300px;
        background-color: #000;
        text-align: center;
        position: relative;
    }

    .left-video div video {
        width: 100%;
        height: 100%;
    }

    .left-video div .video-css {
        width: 100%;
        box-sizing: border-box;
        padding: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .left-video div .video-css .video-play {
        display: inline-block;
        padding: 3px 15px;
        border-radius: 5px;
        border: 1px solid #fff;
        line-height: 20px;
        cursor: pointer;
    }

    .left-video div .video-css button {
        padding: 4px 10px;
        border: 1px solid #fff;
        color: #fff;
        margin-left: 15px;
        background-color: transparent;
        border-radius: 3px;
        cursor: pointer;
    }

    .left-video .video-two {
        margin-top: 5px;
        font-size: 20px;
        font-weight: bold;
    }

    .left-video .video-three {
        margin-top: 5px;
    }

    .left-video .video-three a {
        color: #999;
    }

    .left-video .video-four {
        margin-top: 10px;
        color: #666;
        display: none;
    }

    .left-video .video-four img {
        margin-top: -3px;
        margin-right: 5px;
    }

    .left-video .video-four span {
        margin-right: 10px;
    }

    .video-keyword a {
        display: inline-block;
        padding: 2px 10px;
        background-color: #ff2566;
        color: #fff;
        border-radius: 3px;
        margin-right: 10px;
        margin-top: 10px;
    }
}