@charset "utf-8";
/* CSS Document */

/*============================
#topicsArea
============================*/
#topicsArea { margin-top: 100px; }
#topicsArea .md_mainTitle {}
#topicsArea .md_mainTitle .sub {}
#topicsArea .md_mainTitle .title {}
#topicsArea .content { position: relative; }
#topicsArea .content ul {}
#topicsArea .content ul li { float: left; width: 340px; margin-right: 70px; margin-top: 40px; }
#topicsArea .content ul li:nth-child(3n) { margin-right: 0; }
#topicsArea .content ul li a {}
#topicsArea .content ul li a .image { overflow: hidden; position: relative; border-radius: 20px; }
#topicsArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.05; transition: 0.3s all; }
#topicsArea .content ul li a .image img { object-fit: cover; width: 340px; height: 255px; transition: 0.3s all; }
#topicsArea .content ul li a .text { margin-top: 15px; line-height: 1.5; font-weight: bold; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; max-height: calc(1.5em * 2); }
#topicsArea .content ul li a .sub { margin-top: 10px; line-height: 1.5; font-size: 0.875em; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; max-height: calc(1.5em * 3); }
#topicsArea .content ul li a .date { margin-top: 10px; color: #777; font-size: 0.875em; line-height: 1.5; }
#topicsArea .content ul li a:hover .image img { transform: scale(1.05); }
#topicsArea .content ul li a:hover .image::after { opacity: 0; }
#topicsArea .content .button { position: absolute; right: 0; top: -40px; }
#topicsArea .content .button .md_btn_main {}

@media only screen and (max-width: 640px) {

/*============================
#topicsArea
============================*/
#topicsArea { margin-top: 40px; }
#topicsArea .md_mainTitle {}
#topicsArea .md_mainTitle .sub {}
#topicsArea .md_mainTitle .title {}
#topicsArea .content { position: relative; }
#topicsArea .content ul {}
#topicsArea .content ul li { float: none; width: 100%; margin: 20px 0 0; }
#topicsArea .content ul li:nth-child(3n) {}
#topicsArea .content ul li:first-child { margin-top: 30px; }
#topicsArea .content ul li a { display: flex; align-items: flex-start; } 
#topicsArea .content ul li a .image { width: 100%; margin-right: 3%; border-radius: 10px; }
#topicsArea .content ul li a .image::after {}
#topicsArea .content ul li a .image img { width: 100%; height: 100%; }
#topicsArea .content ul li a .data { width: 100%; }
#topicsArea .content ul li a .data .text { margin-top: 0; }
#topicsArea .content ul li a .data .sub {}
#topicsArea .content ul li a .data .date {}
#topicsArea .content ul li a:hover .image img {}
#topicsArea .content ul li a:hover .image::after {}
#topicsArea .content .button {}
#topicsArea .content .button .md_btn_main {}

}