@charset "utf-8";
/* ==== 메인(index.html) 전문칼럼 최신글 영역 #con31 ==== */

#con31 {padding:194px 0 218px; background:#fff;}
#con31 .ml_title {text-align:center; margin-bottom:44px;}
#con31 .ml_title .subt {font-size:16px; font-weight:300; line-height:22px; letter-spacing:0.1em; color:#222; margin-bottom:12px;}
#con31 .ml_title .lead {font-size:28px; font-weight:400; line-height:40px; letter-spacing:-0.03em; color:#222;}
#con31 .ml_title h2 {font-size:56px; font-weight:bold; line-height:70px; letter-spacing:-0.05em; color:#00B2F1; margin:18px 0 13px;}
#con31 .ml_title h2 b {color:#0079C7;}
#con31 .ml_title .desc {font-size:20px; line-height:26px; letter-spacing:-0.04em; color:#222;}

#con31 .ml_board {width:1210px; margin:0 auto;}
#con31 .ml_board + .ml_board {margin-top:82px;}
#con31 .ml_head {text-align:center; margin-bottom:26px;}
#con31 .ml_head h3 {font-size:28px; font-weight:bold; line-height:40px; letter-spacing:-0.03em;}
#con31 .ml_head h3 a {display:inline; width:auto; height:auto; color:#0079C7;}
#con31 .ml_board.b_info .ml_head h3 a {color:#00B2F1;}
#con31 .ml_head h3 .arr {display:none;}
#con31 .ml_head .more {display:inline-block; width:auto; height:auto; margin-top:15px; font-size:17px; line-height:24px; color:#222;}

#con31 .ml_grid {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); column-gap:80px; row-gap:80px;}
#con31 .ml_grid li:nth-child(n+4) {display:none;}
#con31 .ml_grid li a {display:block; height:auto; color:#222;}
#con31 .ml_grid .thumb {position:relative; width:100%; padding-top:124.86%; border-radius:8px; overflow:hidden; background:#EEF3F8;}
#con31 .ml_grid .thumb img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition:transform 0.4s;}
#con31 .ml_grid .thumb.no_img img {left:50%; top:50%; width:55%; height:auto; transform:translate(-50%, -50%); opacity:0.35; object-fit:contain;}
#con31 .ml_grid li a:hover .thumb img {transform:scale(1.04);}
#con31 .ml_grid li a:hover .thumb.no_img img {transform:translate(-50%, -50%);}
#con31 .ml_grid .tit {display:block; margin-top:32px; font-size:19px; font-weight:bold; line-height:28px; letter-spacing:-0.03em; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#con31 .ml_grid .txt {margin-top:12px; font-size:15px; font-weight:300; line-height:22px; letter-spacing:-0.03em; color:#222; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
#con31 .ml_empty {text-align:center; padding:60px 0; font-size:18px; color:#888;}

/* 태블릿 */
@media screen and (max-width:1300px){
    #con31 .ml_board {width:100%; padding:0 4%;}
    #con31 .ml_grid {column-gap:40px; row-gap:60px;}
}

@media screen and (max-width:1024px){
    #con31 {padding:140px 0 160px;}
    #con31 .ml_title h2 {font-size:48px; line-height:60px;}
}

/* 모바일: 2 x 2 (4개) */
@media screen and (max-width:767px){
    #con31 {padding:53px 0 50px;}
    #con31 .ml_title {margin-bottom:18px; padding:0 20px;}
    #con31 .ml_title .subt {font-size:14px; line-height:20px; margin-bottom:13px;}
    #con31 .ml_title .lead {font-size:20px; line-height:28px;}
    #con31 .ml_title h2 {font-size:35px; line-height:44px; margin:20px 0 21px;}
    #con31 .ml_title .desc {font-size:16px; line-height:26px;}

    #con31 .ml_board {padding:0 20px;}
    #con31 .ml_board + .ml_board {margin-top:60px;}
    #con31 .ml_head {margin-bottom:18px;}
    #con31 .ml_head h3 {font-size:19px; line-height:28px;}
    #con31 .ml_head h3 .arr {display:inline;}
    #con31 .ml_head .more {display:none;}

    #con31 .ml_grid {grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; row-gap:34px;}
    #con31 .ml_grid li:nth-child(4) {display:block;}
    #con31 .ml_grid .thumb {border-radius:6px;}
    #con31 .ml_grid .tit {margin-top:11px; font-size:13px; line-height:18px;}
    #con31 .ml_grid .txt {margin-top:6px; font-size:11px; font-weight:400; line-height:14px; color:#444; -webkit-line-clamp:3;}
    #con31 .ml_empty {padding:40px 0; font-size:14px;}
}