@charset "utf-8";

* {margin: 0}
    html, body {margin: 0;padding: 0;font-family: 'Open Sans', sans-serif;overflow: hidden;}   
    ul, ol, li{list-style:none;margin: 0;padding: 0}
    .list_box {overflow: hidden;}
    .list_box + .list_box {margin-top: 20px;}
    .list_box h3 {position: relative; width: 185px;float: left;height: 100%;background: #f5f5f5;}
    .list_box h3 .logo {height: 100px;background: #003964 url(/images/api/logo.png) no-repeat center 85%;background-size: 142px;display: block;font-size: 0;text-indent: -9999px;}
    .list_box h3 .txt {display: block;color: #000;font-size: 44px;text-align: center;font-weight: 600;}

    .list_box h3 .more {position: absolute;left: 50%;bottom: 5px;margin-left: -22px;line-height: 20px;}
    .list_box h3 .more a {font-size: 13px;color: #003061;line-height: 20px;font-weight: 400;text-decoration: none;}

    .list_box .news_list {overflow: hidden;padding-left: 30px;}
    .list_box .news_list li:first-of-type {}
    .list_box .news_list li {position: relative;}
    .list_box .news_list li a {display: block;height: 100%; padding:0 90px 0 5px; font-size: 16px;color: #3c3c3c;text-decoration: none;white-space:nowrap;text-overflow: ellipsis;overflow: hidden;}
    .list_box .news_list li a:hover {color:#000;}
    .list_box .news_list li a span {position: absolute;right: 5px;top: 50%;padding: 0px 0;font-size: 13px;text-align: left;color: #999;margin-top: -13px;line-height: 21px;}

    .list_box.color_458f9b h3 .logo {background: #458f9b url(/images/api/logo.png) no-repeat center 85%;}
    .list_box.color_9d1300 h3 .logo {background: #9d1300 url(/images/api/logo.png) no-repeat center 85%;}
    .list_box.color_2e7532 h3 .logo {background: #2e7532 url(/images/api/logo.png) no-repeat center 85%;}
    .list_box.color_541a71 h3 .logo {background: #541a71 url(/images/api/logo.png) no-repeat center 85%;}
    .list_box.color_541a71 h3 .logo {background: #541a71 url(/images/api/logo.png) no-repeat center 85%;}
    .list_box.color_989898 h3 .logo {background: #989898 url(/images/api/logo.png) no-repeat center 85%;}

    .list_box .news_list {height: 100%;box-sizing: border-box;}
    .list_box .news_list ul {height: 100%;}
    .list_box .news_list ul li {height: 100%;box-sizing: border-box;width: 100%;}

    .list_box.row1 .news_list li {height: 100%;}
    .list_box.row2 .news_list li {height: 50%;}
    .list_box.row3 .news_list li {height: 33.333%;}
    .list_box.row4 .news_list li {height: 25%;}
    .list_box.row5 .news_list li {height: 20%;}
    .list_box.row6 .news_list li {height: 16.666%;}
    .list_box.row7 .news_list li {height: 14.285%;}
    .list_box.row8 .news_list li {height: 12.5%;}
    .list_box.row9 .news_list li {height: 11.111%;}
    .list_box.row10 .news_list li {height: 10%;}


    .list_box.height1 h3 {width: 125px;float: left;}
    .list_box.height1 h3 .logo {background-size: 90%;}
    .list_box.height1 h3 .txt {display: block;color: #000;font-size: 30px;text-align: center;padding-top: 10px;}


    /*모바일 사이즈는 다시 설정하세요.*/
    @media all and (min-width:20px) and (max-width:640px)  {
      
      .list_box .news_list {padding-left: 0;padding-top: 10px;height: calc(100% - 32px);box-sizing: border-box;}
      .list_box h3 .logo {display: none !important;}
      .list_box h3 {position: relative; text-align: center;padding-bottom: 5px;display: block;float: none !important;height: auto;background: none;margin: auto;width: auto !important;}
      .list_box h3 .txt:before {
        content: ''; background: url(/images/api/logo_black.png) no-repeat center  3px;background-size: 120px;display: inline-block;width: 130px;height: 30px;vertical-align: middle;
      }
      .list_box h3 .txt {width: auto; height: auto;display: inline-block;}
      .list_box h3 .txt { font-size: 21px !important;padding-top: 0 !important}
      .list_box h3 .more {margin-left: -22px;line-height: 20px;left: auto;right: 10px;top: 50%;margin-top: -12px;bottom: auto;}
      
    }

        
    html:lang(ar) .list_box {direction: rtl;}
    html:lang(ar) .list_box h3 {float: right;}
    html:lang(ar) .list_box .news_list li a span {left: 5px;right: auto;}
    html:lang(ar) .list_box .news_list li a {padding: 0 5px 0 90px;}
    html:lang(ar) .list_box .news_list {padding-right: 30px;padding-left: 0}

	.hidden {width: 1px; height: 1px; margin: 0; overflow: hidden; display: inline-block; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); font-size: 100%; line-height: 100%;}