@charset "utf-8";

/*============================
#leadArea
============================*/
#leadArea .voice { margin-bottom: 30px; }
#leadArea .voice ul { justify-content: center; display: flex; align-items: center; column-gap: 20px; }
#leadArea .voice ul li { display: block; width: 350px; background: #fff; padding: 15px 20px 14px; border-radius: 40px; text-align: center; font-weight: bold; font-size: 1.125em; }

/*============================
#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; }
#topicsArea .content ul li a .sub { margin-top: 10px; line-height: 1.5; font-size: 0.875em; }
#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 {}