@charset "utf-8";
a{color: inherit;}
.resorce-blog-list {
    display: block;
    padding-top: 50px;
}

.resorce-blog-list ul>li {
    margin-bottom: 30px;
}

.resorce-blog-list ul ul {
    display: grid;
    grid-template-columns: 70% auto;
    font-size: 18px;
}

.resorce-blog-list ul li .resorce-blog-discript {
    display: block;
}

.resorce-blog-list .catogry {
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.resorce-blog-list .catogry::before {
    content: '';
    top: 0;
    height: 0;
    left: 0;
    right: 0;
    transition: all .4s 0s ease;
    background: #0CABA8;
    position: absolute;
}

.resorce-blog-list .catogry:hover:before {
    height: 100%;
}

.resorce-blog-list .catogry figure {
    margin: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.resorce-blog-list .catogry figure img {
    max-height: 200px;
    height: 100vh;
    object-fit: cover;
    transition:all 1s 0s ease;
    background: #119a6e;
}
 
.resorce-blog-list .catogry:hover:hover img{transform:scale(1.1); opacity:0.5;}  
.resorce-blog-list .catogry figure:before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: block;
    content: '';
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, .2);
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.resorce-blog-list .catogry:hover figure:before {
    -webkit-animation: circle .75s;
    animation: circle .75s;
}

@-webkit-keyframes circle {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

@keyframes circle {
    0% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    100% {
        width: 200%;
        height: 200%;
        opacity: 0;
    }
}

.resorce-blog-list ul li .meta {
    margin: 5px 0;
}

.resorce-blog-list ul li .meta ul li {
    display: inline;
    padding-left: 20px;
    position: relative;
    transition: all .4s 0s ease;
    color: #666666;
    display: inline-block;
    border:none;
    margin:2px 10px 7px 0;
}

.resorce-blog-list ul li .meta ul li i {
    position: absolute;
    left: 0;
    top: 8px;
    transition: all .4s 0s ease; 
    color:#059c99;
    font-size: 14px;
}

.resorce-blog-list ul li address {
    margin: 0;
    font-size: 18px;
    text-align: left;
}

.resorce-blog-list ul li .resorce-blog-discript {
    display: flex;
    flex-direction: column;
    padding: 5px 20px;
    position: relative;
    z-index: 1;
    transition: all .4s 0s ease;
}

.resorce-blog-list ul li .resorce-blog-discript article {
    display: block;
    padding-bottom: 10px;
}
.resorce-blog-list ul li .resorce-blog-discript article .link{ display: flex;flex-direction: row;justify-content: space-between;font-size: 14px;align-items: center;margin-top: 10px;}
.resorce-blog-list ul li .resorce-blog-discript article .link span{ 
    color: #e8123a;
    display: flex;
    align-items: end;
    transition: all .4s 0s ease;
}
.resorce-blog-list ul li .resorce-blog-discript article .link a {
    color: #059c99;
    display: flex;
    align-items: end;
}

.resorce-blog-list ul li .resorce-blog-discript article p {
    text-align: left;
    margin: 0 0 5px;
}

.resorce-blog-list ul li .resorce-blog-discript article h4 {
    margin: 10px 0 6px;
    line-height: 1.4;
    font-size: 16px;
    font-weight: 700;
    color: #999;
}

.resorce-blog-list .catogry:hover .resorce-blog-discript,
.resorce-blog-list .catogry:hover .resorce-blog-discript .meta ul li,
.resorce-blog-list .catogry:hover .resorce-blog-discript,
.resorce-blog-list .catogry:hover .meta ul li i, .resorce-blog-list .catogry:hover .resorce-blog-discript article a, .resorce-blog-list .catogry:hover .resorce-blog-discript article .link span {
    color: #fff !important;
}

.blog_sidebar{display:block;font-size: 18px; margin-top: 50px;}
.blog_right{display:block; background:#f8f8f8; padding:20px 20px 30px; line-height:1.8; margin:0 0 20px;}
/*.blog_right h3 { font-size:18px; font-weight:300;  margin:10px 0 10px; color:#B2902D;}*/
.blog_right h3 { font-size:20px;margin: 10px 0 5px;color: #464747;text-transform: uppercase; }
.blog_tag{background:#059c99;}
.blog_right .blog_search{display:block; margin-top:20px;}
.blog_right .blog_search ul li{ margin-bottom:8px;}
.blog_right .blog_search form{ display:block; position:relative;}
.blog_right .blog_search form:after{content:'\f002'; font-family: 'Font Awesome 5 Free';  font-weight: 900; right:0; top:0; line-height:2.5; position:absolute; width:40px; text-align:center; pointer-events:none; color:#8a50ba;}
.blog_right .blog_search input[type=text]{border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 3px;color: #666; padding:0 45px 0 5px; line-height:2.5; width:100%;}
.blog_right .blog_search input[type=submit], .blog_right .blog_search input[type=button]{display:block; border:none; position:absolute; right:0; top:0; height:100%; width:40px; opacity:0;}


.blogrightpost{display:block;}
.blogrightpost ul{width:100%; overflow:hidden;}
.blogrightpost ul li{width:100%; overflow:hidden; line-height:1.3; border-bottom:1px dotted rgba(0, 0, 0, 0.05);}
.blogrightpost ul li a{ display:block; color:#666; padding:10px 5px 5px 25px; position:relative;}
.blogrightpost ul li a:after{content:'\f105'; font-family: 'Font Awesome 5 Free';  font-weight: 900; left:0; top:10px;  position:absolute; text-align:center;  }
.blogrightpost ul li a:hover{color:#000; text-decoration:none;}
.blogrightpost ul li figure{ float: left;margin: 0 10px 5px 0;}
.blogrightpost ul li figure img{max-height:70px;}
.blogrightpost ul li p{ text-align:left;}
.blogcatogry ul li a{ display:inline-block;}
.blog-tag{background:#0CABA8;}
.blogrighttag{ display:block; overflow:hidden;}
.blogrighttag h3{ margin-bottom:20px;}
.blogrighttag a{/* float:left; display:block; */border: 1px solid #ebebeb;border-radius: 3px;color: #555;display: inline-block;font-size:16px !important;margin: 0 2px 6px 0;padding: 0 18px;line-height: 29px;}
.blogrighttag a:hover{background:#666; border-color:#666; color:#fff;}
.blog-tag .blogrighttag a{color: #fff;}
.blog-tag h3{color:#fff}

.blog_right .select{display:block;position:relative;background:#fff;border:#ccc solid 1px;width:100%; margin-bottom:20px;}
.blog_right .select select{width:100%;border:none;height:33px; padding-right:35px;cursor:pointer;background:#fff; color:#333;}
.blog_right .select:after{font-family:'FontAwesome';content:"\f107";position:absolute;right:0;top:0;height:100%;width:30px;background:#fff; border-left:solid 1px #ccc;line-height:2.5; text-align:center;pointer-events:none; color:#333;}


.resorce-blog-detail{display: flex; flex-direction: column; align-items: start; padding:50px 0;}
.resorce-blog-detail .resource-banner{display: flex; align-items: center;overflow: hidden;width: 100%;}
.resorce-blog-detail .resource-banner figure{display: block;width: 100%;}
.resorce-blog-detail .resource-banner img{height: 450px;object-fit: cover;width:100%;}
.resorce-blog-detail h1, .resorce-blog-detail h2, .resorce-blog-detail h3, .resorce-blog-detail h4, .resorce-blog-detail h5{color: #0BAFAC; margin:10px 0;}
.resorce-blog-detail h1{font-size: 31px;}
.resorce-blog-detail h2{font-size: 24px;}
.resorce-blog-detail h3, .resorce-blog-detail h4, .resorce-blog-detail h5{font-size: 24px;}
.resorce-blog-detail p{margin: 5px 0;}
.resorce-blog-detail p strong{color:#000;}