#pic-topic.blog::after{content:""; width:100%; height:100%; background:url("../images/pic-blog.jpg") no-repeat; background-size:100%; position:absolute; z-index:-3; opacity:.5; top:0; left:0;}
#top-head{padding:10px 25px 0 25px;}
#blog{width:100%; margin:45px 0 0 0; padding:0; border-radius:10px; overflow:hidden; text-align:center; display:block; position:relative;}
#blog ul{width:100%; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
#blog ul li{height:100%; border:1px solid #CCC; display:grid; border-radius:10px; overflow:hidden; grid-template-columns:100%; vertical-align:top;}
#blog ul .pic{overflow:hidden; position:relative; display:flex; -moz-box-pack:center; justify-content:center; -moz-box-align:center; align-items:center; height:100%;}
#blog ul .pic img{width:100%; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#blog ul .content{padding:8px 16px 15px 16px; text-align:left; background:#FFF; font-family:'Kanit', sans-serif;}
#blog ul .more{width:100%; height:44px; line-height:44px; padding:0; color:#FFF; font-size:1.1em; text-align:center; font-style:normal; border-radius:10px; display:block; font-family:'Kanit', sans-serif; background:#6668AA;}
#blog ul h5{margin:0 0 10px 0; color:#6668AA; line-height:1.3; text-align:left; font-weight:500;}
#blog ul p{width:100%; height:88px; margin:0 0 15px 0; padding:0; line-height:22px; font-size:1.1em; text-align:left; font-weight:300;  display:-webkit-box;
line-clamp: 4;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow: hidden;
text-overflow: ellipsis;
}
#blog ul li:hover .pic img{scale:1.07; transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s;}
#blog ul li:hover h5{color:#EF3937;}

#ctrl{width:auto; margin:auto; margin-top:50px; display:inline-block;}
#ctrl a{width:45px; height:40px; line-height:40px; border:1px solid #CCC; background:#FFF; display:block; float:left; position:relative;}
#ctrl a::before{content:""; height:12px; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);}
#ctrl a:hover{color:#FFF; background:#EEE; }
#ctrl .first{border-radius:10px; border-bottom-right-radius:0; border-top-right-radius:0; overflow:hidden;}
#ctrl .first::before{width:18px; background:url(../images/icon-arrow1.png);}
#ctrl .last{border-radius:10px; border-bottom-left-radius:0; border-top-left-radius:0; overflow:hidden;}
#ctrl .last::before{width:18px; background:url(../images/icon-arrow1.png); transform:rotate(-180deg) translate(50%, 50%);}
#ctrl .prev{border-left:0; border-right:0px;}
#ctrl .prev::before{width:9px; background:url(../images/icon-arrow1.png);}
#ctrl .next{border-right:0px;}
#ctrl .next::before{width:9px; background:url(../images/icon-arrow1.png); transform:rotate(-180deg) translate(50%, 50%);}
#ctrl .num{border-right:0px; color:#AAA; text-align:center; display:block; float:left; font-weight:500; font-family:'Kanit', sans-serif;}
#ctrl .num:hover{color:#000;}
#ctrl .num::before{display:none;}
#ctrl .num.active{color:#FFF; background:#6668AA; pointer-events:none;}

@media (min-width: 1921px) {
  #pic-topic.blog::after{content:""; background:url("../images/pic-blog.jpg") no-repeat top center; background-size:1920px;}
}

@media (max-width: 780px) {
    #blog ul{grid-template-columns:repeat(2, 1fr); gap:20px;}
    #blog ul p, #blog ul .more{font-size:.9em;}
    #blog ul .more{height:38px; line-height:38px;}
}
@media (max-width: 480px) {
    #top-head{padding:10px 15px 0 15px;}
    #top-head .lang{right:15px;}
    #blog{margin:30px 0 20px 0;}
    #blog ul{grid-template-columns:repeat(1, 1fr); gap:20px;}
    #blog ul .more{height:36px; line-height:36px;}
    #ctrl{margin-top:40px;}
}
@media (max-width: 414px) {    
    #blog ul h5{font-size:1em;}
}