@charset "UTF-8";


.contents_topics h3.com_title{margin-bottom: 20px;}
.contents_topics .area_list{display: grid;grid-template-columns: repeat(2, 1fr);gap: 40px;margin-bottom: 60px;}

.contents_topics .area_list .box{width: 100%;}
.contents_topics .area_list .box a .text{font-size: 0.75rem;font-weight: 500;}

.contents_topics .area_list .wrap{display: flex;gap: 0 20px;}
.contents_topics .area_list .cont{max-width: calc(100% - 200px);width: 100%;position: relative;}
.contents_topics .area_list .box h3{font-size: 1.0625rem;font-weight: bold;border-bottom: 2px solid;padding-bottom: 7px;margin-bottom: 10px;}
.contents_topics .area_list .box .text{font-size: 0.9375rem;line-height: 1.6;}
.contents_topics .area_list .box .image{display: block;width: 180px;}
.contents_topics .area_list .box .image img{border-radius: 10px;width: 100%;}
.contents_topics .area_list .box a{text-decoration: none;text-align: right;display: block;position: absolute;bottom: 0;right: 0;
    background: url(../../images/home/slider_ar.svg) no-repeat right;background-size: 17px;padding-right: 25px;font-size: 0.9375rem;font-weight: bold;letter-spacing: 0;}


.contents_topics .area_list .box.color1 h3{color: #5151AD;border-color: #5151AD;}
.contents_topics .area_list .box.color2 h3{color: #00B993;border-color: #00B993;}
.contents_topics .area_list .box.color3 h3{color: #009AD9;border-color: #009AD9;}
.contents_topics .area_list .box.color4 h3{color: #F73030;border-color: #F73030;}
.contents_topics .area_list .box.color5 h3{color: #FE8809;border-color: #FE8809;}
.contents_topics .area_list .box.color6 h3{color: #7FC915;border-color: #7FC915;}
.contents_topics .area_list .box.color7 h3{color: #FF5CB6;border-color: #FF5CB6;}
.contents_topics .area_list .box.color8 h3{color: #00B9B2;border-color: #00B9B2;}

@media screen and (max-width:980px) {
.contents_topics .area_list{display: block;}
.contents_topics .area_list .box{padding-bottom: 20px;}
}

@media screen and (max-width:767px) {
.contents_topics .area_list .box .image{min-width: 90px;max-width: 120px;width: 100%;}
.contents_topics .area_list .cont{max-width: calc(100% - 110px);display: flex;flex-direction: column;justify-content: space-between;}
.contents_topics .area_list .box a{position: relative;font-size: 0.875rem;margin-top: 20px;}
.contents_topics .area_list .box .text{line-height: 1.5;}
}