@charset "utf-8";

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

.md_lead .copy { font-size: 1em; }

/*============================
#storyPickArea
============================*/
#storyPickArea { padding-top: 50px; }
#storyPickArea .md_mainTitle {}
#storyPickArea .md_mainTitle .sub {}
#storyPickArea .md_mainTitle .main {}
#storyPickArea .content { margin-top: 0; }
#storyPickArea .content ul {}
#storyPickArea .content ul li { width: auto; }
#storyPickArea .content ul li a {}
#storyPickArea .content ul li a .image { height: inherit; border-radius: 6px; aspect-ratio: 3 / 2; }
#storyPickArea .content ul li a .image::after {}
#storyPickArea .content ul li a .image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#storyPickArea .content ul li a .data { margin-top: 15px; }
#storyPickArea .content ul li a .data .number { width: 90px; padding-bottom: 10px; padding-top: 4px; }
#storyPickArea .content ul li a .data .category { padding: 4px 0 10px 10px; }
#storyPickArea .content ul li a .text { margin-top: 10px; max-height: 58px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.9125em; }
#storyPickArea .content ul li a .sub { margin-top: 5px; max-height: 54px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.875em; }
#storyPickArea .content ul li a .date { margin-top: 5px; }
#storyPickArea .content ul li a:hover .image img { transform: scale(1.05); }
#storyPickArea .content ul li a:hover .image::after { opacity: 0; }
#storyPickArea .content.pick { margin-top: 30px; }
#storyPickArea .content.pick ul { display: block; flex-wrap: inherit; gap: 0;}
#storyPickArea .content.pick ul li { float: inherit; padding: 0 15px; }
#storyPickArea .content.pick ul li.pickup { margin-bottom: 20px; }
#storyPickArea .content.pick ul li.pickup::after { left: 0; width: 52px; height: 52px; font-size: 0.875em; }
#storyPickArea .content.pick ul li a .data .number { width: 120px; }	
#storyPickArea .content.all ul { display: flex; flex-wrap: wrap; gap: 4%; }
#storyPickArea .content.all ul li { margin-top: 20px; width: 48%; }
#storyPickArea .content .swiper-button-prev { display: none; }
#storyPickArea .content .swiper-button-next { display: none; }
#storyPickArea .search { margin-top: 30px; padding-bottom: 60px; }
#storyPickArea .search .md_tab_bar {}
#storyPickArea .search .searchContent { padding: 20px 10px; }
#storyPickArea .search .searchContent ul { gap: 5px; }
#storyPickArea .search .searchContent ul li { display: block; width: 100%; }
#storyPickArea .search .searchContent ul li a { display: block; width: 100%; font-size: 0.875em; }
#storyPickArea .search .searchContent ul li a.active {}
#storyPickArea .search::after { width: 40px; height: 40px; bottom: 0; background-size: 40px auto; }

/*============================
#supporterArea
============================*/
#supporterArea { padding-top: 40px; padding-bottom: 40px; }
#supporterArea .md_mainTitle {}
#supporterArea .md_mainTitle .sub {}
#supporterArea .md_mainTitle .main {}
#supporterArea .md_mainTitle .lead { margin-top: 20px; position: inherit; left: inherit; top: inherit; }
#supporterArea .content { margin-top: 20px; }
#supporterArea .content ul {}
#supporterArea .content ul li { float: inherit; width: 100%; margin-right: 0; margin-top: 20px; position: relative; }
#supporterArea .content ul li:nth-child(3n) { margin-right: 0; }
#supporterArea .content ul li a { display: flex; align-items: flex-start; }
#supporterArea .content ul li a .image { width: 40%; margin-right: 5%; overflow: hidden; position: relative; border-radius: 10px; }
#supporterArea .content ul li a .image::after {}
#supporterArea .content ul li a .image img { width: 100%; height: auto; }
#supporterArea .content ul li a .image .category { top: 0; }
#supporterArea .content ul li a .image .category img { width: 80px; height: auto; }
#supporterArea .content ul li a .data { flex: 1; }
#supporterArea .content ul li a .data .text {margin-top: 0; }
#supporterArea .content ul li a .data .date {}
#supporterArea .content ul li a:hover .image img {}
#supporterArea .content ul li a:hover .image::after {}

/*============================
#storyArea
============================*/
#storyArea { padding-top: 50px; }
#storyArea .md_mainTitle {}
#storyArea .md_mainTitle .sub {}
#storyArea .md_mainTitle .main {}
#storyArea .content { margin-top: 0; }
#storyArea .content ul {}
#storyArea .content ul li { width: auto; }
#storyArea .content ul li a {}
#storyArea .content ul li a .image { height: inherit; border-radius: 6px; aspect-ratio: 3 / 2; }
#storyArea .content ul li a .image::after {}
#storyArea .content ul li a .image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
#storyArea .content ul li a .data { margin-top: 15px; }
#storyArea .content ul li a .data .number { width: 90px; padding-bottom: 10px; padding-top: 4px; }
#storyArea .content ul li a .data .category { padding: 4px 0 10px 10px; }
#storyArea .content ul li a .text { margin-top: 10px; max-height: 58px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.9125em; }
#storyArea .content ul li a .sub { margin-top: 5px; max-height: 54px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 0.875em; }
#storyArea .content ul li a .date { margin-top: 5px; }
#storyArea .content ul li a:hover .image img { transform: scale(1.05); }
#storyArea .content ul li a:hover .image::after { opacity: 0; }
#storyArea .content.pick { margin-top: 30px; }
#storyArea .content.pick ul { display: block; flex-wrap: inherit; gap: 0;}
#storyArea .content.pick ul li { float: inherit; padding: 0 15px; }
#storyArea .content.pick ul li.pickup { margin-bottom: 20px; }
#storyArea .content.pick ul li.pickup::after { left: 0; width: 52px; height: 52px; font-size: 0.875em; }
#storyArea .content.pick ul li a .data .number { width: 120px; }	
#storyArea .content.all ul { display: flex; flex-wrap: wrap; gap: 4%; }
#storyArea .content.all ul li { margin-top: 20px; width: 48%; }
#storyArea .content .swiper-button-prev { display: none; }
#storyArea .content .swiper-button-next { display: none; }
#storyArea .search { margin-top: 30px; padding-bottom: 60px; }
#storyArea .search .md_tab_bar {}
#storyArea .search .searchContent { padding: 20px 10px; }
#storyArea .search .searchContent ul { gap: 5px; }
#storyArea .search .searchContent ul li { display: block; width: 100%; }
#storyArea .search .searchContent ul li a { display: block; width: 100%; font-size: 0.875em; }
#storyArea .search .searchContent ul li a.active {}
#storyArea .search::after { width: 40px; height: 40px; bottom: 0; background-size: 40px auto; }
	
}