@charset "utf-8";

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


/*============================
#leadArea
============================*/
.md_lead { padding-bottom: 150px; }
.md_lead .box { flex-direction: column; }
.md_lead .box .text {}
.md_lead .box .button { width: 100%; margin-top: 0; margin-right: 0; }
.md_lead .box .button a.md_btn_line {}
.md_lead {}

/*============================
#communityArea
============================*/
#communityArea { margin-top: -120px; }
#communityArea .md_container {}
#communityArea .content { flex-direction: column; padding: 25px 20px; }
#communityArea .content .data {}
#communityArea .content .data .title {}
#communityArea .content .data .text {}
#communityArea .content .banner { width: 100%; margin-top: 20px; }
#communityArea .content .banner a {}
#communityArea .content .banner a::after {}
#communityArea .content .banner a img {}
#communityArea .content .banner a:hover img {}
#communityArea .content .banner a:hover::after {}

/*============================
#frameArea
============================*/
#frameArea { margin-top: 40px; }
#frameArea .md_mainTitle {}
#frameArea .md_mainTitle .sub {}
#frameArea .md_mainTitle h2.main {}
#frameArea .content { margin: 20px -15px 0; }
#frameArea .content .image { background-size: 180%; padding: 20px 0; }
#frameArea .content .image img { width: 90%; height: auto; }
#frameArea .content .image .text { text-align: left; margin-top: 20px; line-height: 1.5; padding: 0 20px; }

/*============================
#exampleArea
============================*/
#exampleArea { margin-top: 40px; padding-top: 40px; }
#exampleArea .md_mainTitle {}
#exampleArea .md_mainTitle .sub {}
#exampleArea .md_mainTitle h2.main {}
#exampleArea .content {}
#exampleArea .content ul {}
#exampleArea .content ul li { margin-top: 30px; width: 48.5%; margin-right: 3%; }
#exampleArea .content ul li:nth-child(2n) {}
#exampleArea .content ul li .image { border-radius: 6px; }
#exampleArea .content ul li .image img {}
#exampleArea .content ul li .subTitle {}
#exampleArea .content ul li .subTitle .name {}
#exampleArea .content ul li .subTitle .problem { position: relative; display: block; text-align: right; margin-top: 10px; font-size: 0.875em; line-height: 1.35; }
#exampleArea .content ul li .text {}
#exampleArea .content ul li .button { margin-top: 15px; }
#exampleArea .content ul li .button a { padding: 17px 42px 16px 15px; }
#exampleArea .content ul li .button a::after {}

/*============================
#topicsArea
============================*/
#topicsArea { margin-top: 40px; }
#topicsArea .md_mainTitle {}
#topicsArea .md_mainTitle .sub {}
#topicsArea .md_mainTitle .title {}
#topicsArea .content {}
#topicsArea .content ul {}
#topicsArea .content ul li { margin-top: 30px; float: none; width: 100%; margin-right: 0; }
#topicsArea .content ul li:nth-child(3n) {}
#topicsArea .content ul li a { display: flex; flex-direction: column; }
#topicsArea .content ul li a .image { border-radius: 6px; width: 120px; height: 80px; }
#topicsArea .content ul li a .image::after {}
#topicsArea .content ul li a .image img { width: 100%; height: auto; }
#topicsArea .content ul li a .text { margin: -80px 0 0 135px; }
#topicsArea .content ul li a .sub { margin: 5px 0 0 135px;  }
#topicsArea .content ul li a .date { margin: 5px 0 0 135px; }
#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 {}


}