@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 + .list_box {margin-top: 20px;}
    .list_box h3 {position: relative; text-align: center;background: #003964;height: 40px;line-height: 40px;}
    .list_box h3 .logo {
      width: 100px;height: 100%;background: url(/images/api/logo.png) no-repeat center center;background-size: 100%;display: inline-block;font-size: 0;text-indent: -9999px;vertical-align: 7px;
    }
    .list_box h3 .txt {
      background: url(/images/api/logo.png) no-repeat left 11px;background-size: 104px;display: inline-block;color: #fff;font-size: 18px;text-align: center;font-weight: 500;
      padding-left: 108px;
    }
    .list_box h3 .more {position: absolute;right: 10px;top: 50%;margin-top: -12px;line-height: 20px;}
    .list_box h3 .more a {font-size: 13px;color: #fff;line-height: 20px;font-weight: 400;text-decoration: none;}
    
    .list_box .news_list {background: #003964;padding:0 10px 10px 10px;}
    .list_box .news_list ul{padding: 10px 0;background: #fff;}
    .list_box .news_list ul:after {content: '';display: block;clear: both;}
    .list_box .news_list li {position: relative;width: 33.333%;float: left;padding: 0 10px;box-sizing: border-box;text-align: center;overflow: hidden;}
    .list_box .news_list li + li {padding: 0 10px;}
    .list_box .news_list li:first-of-type {padding-left: 10px}
    .list_box .news_list li:last-of-type {padding-right: 10px;}
    .list_box .news_list li a {display: inline-block;text-decoration: none;position: relative;padding-bottom: 25px;box-sizing: border-box;height: 100%;margin: auto;max-width: 100%;}
    .list_box .news_list li a .tit {
      display: block; padding-top: 5px;font-size: 15px;color: #211514;line-height: 18px;text-decoration: none;white-space:normal;text-overflow: ellipsis;overflow: hidden;
      text-align: left; word-wrap: break-word; display: -webkit-box;-webkit-box-orient: vertical;min-width: 60px; margin: auto;
    }
    .list_box .news_list li a .photo {display: block; padding:0;}
    .list_box .news_list li a .photo img {width: 100%;}
    .list_box .news_list li a:hover {color:#000;}
    .list_box .news_list li a span.date {position: absolute;left: 0;bottom:1px;padding: 0px 0;font-size: 12px;text-align: left;color: #211514;white-space: nowrap;}

    .list_box.color_458f9b h3 {background: #458f9b;}
    .list_box.color_458f9b .news_list {background: #458f9b;}
    .list_box.color_9d1300 h3 {background: #9d1300;}
    .list_box.color_9d1300 .news_list {background: #9d1300;}
    .list_box.color_2e7532 h3 {background: #2e7532;}
    .list_box.color_2e7532 .news_list {background: #2e7532;}
    .list_box.color_541a71 h3 {background: #541a71;}
    .list_box.color_541a71 .news_list {background: #541a71;}
    .list_box.color_989898 h3 {background: #989898;}
    .list_box.color_989898 .news_list {background: #989898;}

    .list_box.col1 .news_list li {width: 100%;}
    .list_box.col2 .news_list li {width: 50%;}
    .list_box.col4 .news_list li {width: 25%;}
    .list_box.col5 .news_list li {width: 20%;}
    .list_box.col6 .news_list li {width: 16.666%;}
    .list_box.col7 .news_list li {width: 14.285%;}



    .list_box .news_list {height: calc(100% - 40px);box-sizing: border-box;}
    .list_box .news_list ul {height: 100%;box-sizing: border-box;}
    .list_box .news_list ul li {height: 100%;box-sizing: border-box;}
    .list_box .news_list li a .photo {height: 65%;text-align: center;overflow: hidden;}
    .list_box .news_list li a .photo img {height: 100%;width: auto;}
    .list_box .news_list li a .tit {height: 35%;-webkit-line-clamp: 2;/* max-height: 37px; */}

    a:hover {text-decoration: none;}

    .list_box.height1 .news_list li a .tit {-webkit-line-clamp: 1;max-height: 20px;height: 25%;padding-top: 10px;min-width: 92px;}

    .list_box.height2 .news_list li a .tit {-webkit-line-clamp: 2;max-height: 38px;min-width: 105px;}

    .list_box.height3 .news_list li a .tit {-webkit-line-clamp: 3;max-height: 56px;min-width: 150px;}
    .list_box.height3 .news_list li a .photo img {/* height: auto; */}
    .list_box.height3 .news_list li a .tit {min-width: 100px;}

    .list_box.height4 .news_list li a .tit {-webkit-line-clamp: 4;/* max-height: 76px; *//* padding-top: 10px; */min-width: 100% !important;}


    .list_box.height4 .news_list li a .photo img {max-width: 100%;}
    .list_box.height4 .news_list li a .photo {height: 60%;}
    .list_box.height4 .news_list li a .photo img {height: auto;}

.list_box.col5 .news_list li a .tit{font-size:13px !important;padding-top: 0px;line-height: 1em;}
     .list_box.col5 .news_list li a .photo img {max-width: 100%;}
 .list_box.col5 .news_list li a .photo {height: auto;}
 
 .list_box.col5 .news_list li a .photo img {
    height: auto;
}

    /*모바일 사이즈는 다시 설정하세요.*/
    @media all and (min-width:300px) and (max-width:640px)  {
      .list_box h3 {width: 100%;float: none;text-align: center;}
      .list_box h3 {width: 100%;float: none;}
      .list_box h3 .logo {height: 40px;display: inline-block;width: 120px;background: url(img/logo.png) no-repeat center center;background-size: 94%;vertical-align: top;}
      .list_box h3 .txt {display: inline-block;color: #fff;font-size: 18px;text-align: center;vertical-align: top;line-height: 40px;}
      .list_box .news_list {padding: 0 10px 10px 10px;}
      .list_box .news_list li a {display: block;padding: 0 80px 0 0;height: 100% !important;color: #3c3c3c;line-height: 24px;}
      .list_box .news_list li a span {font-size: 12px;}

      .list_box .news_list li {width: 100% !important;padding: 0 10px !important;}
      .list_box .news_list li a .photo {display: none;}
      .list_box .news_list li a .photo img {width: 100% !important;height: auto !important;}
      .list_box .news_list li a .tit {overflow: hidden;width: 100% !important;display: block;white-space: nowrap;padding-top: 0 !important;height: 100% !important;max-height: auto;}
      .list_box .news_list li a span.date {bottom: 50%;margin-bottom:-13px;left: auto;right: 0;}
      .list_box .news_list ul li {}
      .list_box .news_list ul {padding: 0;}
      .list_box .news_list li + li {padding-top:0;}

      .list_box.height1 .news_list li a .tit {max-height: 300px;}
      .list_box.height2 .news_list li a .tit {max-height: 300px;}
      .list_box.height3 .news_list li a .tit {max-height: 300px;}
      .list_box.height4 .news_list li a .tit {max-height: 300px;}


    .list_box.height4 .news_list li a .photo img {max-width: 100%;}
    .list_box.height4 .news_list li a .photo {height: 60%;}
    .list_box.height4 .news_list li a .photo img {height: 100%;}

      .list_box.col1 .news_list li {height: 100% !important;}
      .list_box.col2 .news_list li {height: 50% !important;}
      .list_box.col3 .news_list li {height: 33.333% !important;}
      .list_box.col4 .news_list li {height: 25% !important;}
      .list_box.col5 .news_list li {height: 20% !important;}
      .list_box.col6 .news_list li {height: 16.666% !important;}
      .list_box.col6 .news_list li {height: 16.666% !important;}
      .list_box.col7 .news_list li {height: 14.285% !important;}
      .list_box.col8 .news_list li {height: 12.5% !important;}
      .list_box.col9 .news_list li {height: 11.111% !important;}
      .list_box.col10 .news_list li {height: 10% !important;}
      
      html:lang(ar) .list_box .news_list li a span.date {left:0  !important;right:auto  !important;font-size: 13px;}
      html:lang(ar) .list_box .news_list li a {padding: 3px 0 2px 90px;}
      
    }

    @media all and (max-width:300px) {
      .list_box h3 {text-align: left;padding-left: 10px;}
      .list_box.height4 .news_list li a .tit {-webkit-line-clamp: 4;max-height: 76px;padding-top: 10px;min-width: 175px;}
      .list_box .news_list li a {width: 100%;}
      .list_box .news_list li a span.date {/* padding-left: 10px; */}
    }

    html:lang(ar) .list_box {direction: rtl;}
    html:lang(ar) .list_box .news_list li a .tit {text-align: right;}
    html:lang(ar) .list_box .news_list li a span.date {left:auto;right: 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%;}