a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}body {line-height: 1}menu, ol, ul {list-style: none}blockquote, q {quotes: none}blockquote:after, blockquote:before, q:after, q:before {content: '';content: none}table { border-collapse: collapse;border-spacing: 0;}


.blog-list,.blog-detail{width:100%;display:flex;gap:35px;justify-content:space-between; margin-bottom:60px;}
.blog-list .left-col,.blog-detail .left-col{width:70%;}
.blog-list .right-col,.blog-detail .right-col{width:calc(30% - 35px);}
.blog-list .left-col ul{display:flex; flex-flow:wrap;gap:15px;}
.blog-list .left-col li{background: #fff; border-radius: 12px;width:calc(50% - 8px);border:1px solid #dddfe2;margin-bottom:15px;}
.blog-list .left-col li .imgb,.blog-list .left-col li .imgb img{width: 100%; border-radius: 12px 12px 0px 0px;}
.blog-list .left-col li .textb{width: 100%; text-align: center; padding: 0px 15px 15px 15px;}
.blog-list .left-col li .c-btn{background:#226e68; text-transform: uppercase; font-size: 16px; padding: 10px 20px;color:#fff;}
.blog-list .left-col li .c-btn:hover{background:#000;}
.blog-list .left-col li h4{font-size: 22px; font-weight: bold; color:#226e68; text-transform: uppercase; margin-bottom: 10px;}
.blog-list .left-col li h4 a{text-decoration:none;}
.blog-list .left-col li h4 a:hover{color:#226e68;}
.blog-list .left-col li p{font-size: 14px; line-height: 24px; text-align:justify;}
.blog-list .right-col h4{font-size:24px;margin-bottom:20px;}
.socials-b{width:100%;padding-bottom:40px;}
.socials-b ul{display:flex;gap:8px;}
.socials-b li a {width:40px;height:40px;line-height:40px;text-align:center; border:2px solid #226e68;display:inline-block;font-size:20px;border-radius:3px;}
.socials-b li a:hover{color:#000; border-color:#000;}
.recent-post{width:100%; margin-bottom:35px;}
.recent-post li{border-bottom:1px dotted #226e68;padding-bottom:10px;margin-bottom:10px; font-size:15px;}
.recent-post li a{font-size:16px;text-decoration:none; color:#1d1d1d}
.recent-post li:last-child{border:none;}
.recent-post li a:hover{color:#226e68;}

.blog-list .left-col li .textb .admin-info{width:100%;display:flex; justify-content:space-between;padding-bottom:10px;font-size:13px;}
.blog-list .left-col li .textb .admin-info i{font-size:15px;color:#226e68; padding-right:5px;}
.blog-detail .left-col .imgb{margin-bottom:15px;}


.blog-detail .left-col .textb .admin-info{width: 100%;display: flex;font-size: 14px;gap: 15px;background: #f1f2f3;padding: 10px;margin-bottom:15px;border-radius:3px;border: 1px solid #b2dbd8;}
.blog-detail .left-col .textb .admin-info i{font-size:15px;color:#226e68;}
.blog-detail .left-col .textb h3{margin-bottom:20px;}
.blog-detail .right-col h4{margin-bottom:20px;}

.blog-brief{width:100%; padding-top:40px;}
.blog-brief h2{font-size: 25px;line-height: 30px;margin-bottom: 20px;color: #226e68;position: relative;text-transform: uppercase;font-weight:600;}
.blog-brief .list-dot, .blog-brief .list-no{margin-bottom:20px;}
.blog-detail{padding-top:40px;}


@media only screen and (min-width: 1024px) and (max-width:1199px) {
    
  .blog-list .left-col li h4{font-size:20px;}



}


@media  (max-width: 1023px) {

.blog-list .left-col li h4{font-size:18px;line-height:24px;}
.blog-list .left-col li p{font-size:13px;line-height:21px;}
.blog-list .left-col li .c-btn{font-size:14px;padding:8px 20px;}
.recent-post li{font-size:13px;padding-bottom:8px;margin-bottom:8px;}
.blog-list .right-col h4{font-size:18px;margin-bottom:10px;}
.socials-b{padding-bottom:20px;}
.recent-post{margin-bottom:15px;}
.blog-list{gap:20px; margin-bottom:0px;}
.blog-list .right-col, .blog-detail .right-col{width: calc(30% - 20px);}
.page{padding-top:0px;}

}


@media  (max-width: 767px) {

.page{padding:0px 0px 15px 0px;}
.blog-brief h2{font-size:18px;line-height:26px;}
.common-text h3{font-size:18px;margin-bottom:5px;line-height:26px;}
.common-text p, .common-text li{font-size:13px;line-height:20px;}
.blog-brief .list-dot, .blog-brief .list-no{margin-bottom:10px;}
.common-text h4{font-size:16px;margin-bottom:5px;line-height:20px;}
.blog-list{flex-flow:column;}
.blog-list .left-col, .blog-detail .left-col{width:100%;}
.blog-list .left-col ul{gap:0px;}
.blog-list .left-col li{width:100%;}
.blog-list .left-col li .textb{padding:15px;}
.blog-list .left-col li h4{font-size:18px;margin-bottom:15px;}
.blog-list .left-col li p{font-size:13px;line-height:20px;}
.blog-list .left-col li .c-btn{font-size:14px;padding:8px 20px;}
.blog-list, .blog-detail{gap:15px;margin-bottom:20px;}
.blog-list .right-col, .blog-detail .right-col{width:100%;}
.blog-list .right-col h4{font-size:20px;margin-bottom:10px;}
.socials-b{padding-bottom:25px;}
.recent-post{margin-bottom:20px;}
.socials-b li a{width:35px;height:35px;line-height:33px; font-size:17px;}
.common-text li{text-align:left;}
.blog-detail{flex-flow:column;}
.blog-detail .textb li{font-size:13px;line-height:22px;}
.blog-detail{padding-top:10px;}

}