@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: 36px;line-height: 36px;}
    .list_box h3 .logo {
      width: 130px;height: 100%;background: url(/images/api/logo.png) no-repeat center center;background-size: 90%;display: inline-block;font-size: 0;text-indent: -9999px;vertical-align: 8px;
    }
    .list_box h3 .txt {
      background: url(/images/api/logo.png) no-repeat left 9px;background-size: 100px;display: inline-block;color: #fff;font-size: 16px;text-align: center;font-weight: 500;
      padding-left: 105px;font-weight: 600;
    }
    .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 {padding-top: 10px;}
    .list_box .news_list ul{/*padding: 0 10px;*/}
    .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;box-sizing: border-box;}

    .list_box .news_list li + li {}
    .list_box .news_list li:first-of-type {padding-left: 0;}
    .list_box .news_list li:last-of-type {padding-right: 0;float: right;z-index: 0;}
    .list_box .news_list li a {display: block;text-decoration: none;position: relative;height: 100%;margin: auto;overflow: hidden;padding-bottom: 20px;max-width: 100%;box-sizing: border-box;}
    .list_box .news_list li a .tit {
      display: block;
      padding-top: 2px;
      font-size: 14px;
      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;
      margin: auto;
    }
    .list_box .news_list li a .photo {display: inline-block;padding:0;margin: auto;overflow: hidden;text-align: center;}
    .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;line-height: 20px;}

    .list_box .news_list.h1 li a {max-width: 110px;}
    .list_box .news_list.h2 li a {max-width: 150px;}
    .list_box .news_list.h3 li a {max-width: 200px;}


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

    

    .list_box .news_list {padding-top: 5px;height: calc(100% - 32px);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;z-index: 1;}
    .list_box .news_list li a .photo {height: 65%;}
    .list_box .news_list li a .photo img {height: 100%;width: 100% !important;}
    .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: 2;max-height: 40px;height: 29%;padding-top: 5px;min-width: 134px;}

    .list_box.height2 .news_list li a .tit {-webkit-line-clamp: 2;max-height: 38px;min-width: 150px;}
    .list_box.height2 .news_list li a .photo img {/* height: 97%; */}

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

    .list_box.height4 .news_list li a .tit {-webkit-line-clamp: 4;max-height: 74px;min-width: 224px;}

    .list_box.height4 .news_list {padding-top: 15px;}

    .list_box.col1 .news_list li {min-width: 100%;}
    .list_box.col2 .news_list li {min-width: 50%;}
    .list_box.col2 .news_list li:last-of-type {min-width: 30%;}
    .list_box.col3 .news_list li {min-width: 33.333%;}
    .list_box.col3 .news_list li:last-of-type {min-width: 20%;}
 
    .list_box.col4 .news_list li {min-width: 25.3% !important;width: 25% !important;max-width: 24% !important;padding-right: 1.3% !important;}
    .list_box.col4 .news_list li:last-of-type {min-width: 24% !important;width: 24% !important;padding: 0 !important;}
    .list_box.col4.height2 .news_list li a .photo img{max-width: 100%;}
    .list_box.col4 .news_list li a .photo{height: auto;width: 100% !important;}
    .list_box.col4.height2 .news_list li a .tit {width: 100% !important;}
    .list_box.col4.height4 .news_list {padding-top: 7px;}
  .list_box.col4 .news_list li a .tit {display: block;padding-top: 0px;font-size: 14px;
      color: #211514;line-height: 14px;text-decoration: none;width: 100% !important;white-space:normal;text-overflow: ellipsis;overflow: hidden;
      text-align: left;
      height: 28px;
      word-wrap: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      margin: auto;
    }
    .list_box.col4 .news_list li a span.date {position: absolute;left: 0;display: none;bottom:1px;padding: 0px 0;font-size: 12px;text-align: left;color: #211514;white-space: nowrap;line-height: 20px;}


    .list_box.col5 .news_list li {width: 20.2% !important;max-width: 20.2% !important;padding-right: 1.1% !important;}
    .list_box.col5 .news_list li:last-of-type {min-width: 19% !important;width: 19% !important;padding: 0 !important;}
    .list_box.col5.height2 .news_list li a .photo img{max-width: 100%;}
    .list_box.col5 .news_list li a .photo{height: auto;width: 100% !important;}
    .list_box.col5.height2 .news_list li a .tit {width: 100% !important;}
    .list_box.col5 .news_list li a .tit {
      display: block;
      padding-top: 0px;
      font-size: 14px;
      color: #211514;
      line-height: 14px;
      text-decoration: none;
      white-space:normal;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: left;
       height: 30px;
      word-wrap: break-word;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      margin: auto;
    }


    .list_box.col6 .news_list li {min-width: 16%;max-width: 13.166%;}
    .list_box.col6 .news_list li:last-of-type {min-width: 13.166%;margin-right: 0;}
    .list_box.col6 .news_list li a .photo img {height: 100%;width: 100% !important;}
   
    .list_box.col7 .news_list li {min-width: 14.285%;}
    .list_box.col7 .news_list li:last-of-type {min-width: 10%;}
    .list_box.col8 .news_list li {min-width:12.5%;}
    .list_box.col9 .news_list li {min-width: 11.111%;}
    .list_box.col10 .news_list li {min-width: 10%;}
/*
    .list_box.col1 .news_list li.image {min-width: 100%;}
    .list_box.col2 .news_list li.image {min-width: 45%;}
    .list_box.col3 .news_list li.image {min-width: 30%;}
    .list_box.col4 .news_list li.image {min-width: 22.5%;}
    .list_box.col5 .news_list li.image {min-width: 18%;}
    .list_box.col6 .news_list li.image {min-width: 15%;}
    .list_box.col7 .news_list li.image {min-width: 12.86%;}
    .list_box.col8 .news_list li.image {min-width: 11.25%;}
    .list_box.col9 .news_list li.image {min-width: 10%;}

    .list_box.col1 .news_list li.space {min-width: 0%;}
    .list_box.col2 .news_list li.space {min-width: 10%;}
    .list_box.col3 .news_list li.space {min-width: 5%;}
    .list_box.col4 .news_list li.space {min-width: 3.33%;}
    .list_box.col5 .news_list li.space {min-width: 2.5%;}
    .list_box.col6 .news_list li.space {min-width: 2%;}
    .list_box.col7 .news_list li.space {min-width: 1.67%;}
    .list_box.col8 .news_list li.space {min-width: 1.43%;}
    .list_box.col9 .news_list li.space {min-width: 1.25%;}
*/

    /*모바일 사이즈는 다시 설정하세요.*/
    @media all and (min-width:200px) and (max-width:640px)  {
      .list_box h3 {width: 100%;float: none;text-align: left;padding-left: 10px;box-sizing: border-box;}
      .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: 34px;}
      .list_box .news_list {padding: 0 10px;}
      .list_box .news_list li a {display: flex;padding: 0 10px 0 0;height: auto !important;color: #3c3c3c;line-height: 24px;}
      .list_box .news_list li a span {font-size: 13px;}
      .list_box .news_list li a span.date {font-size: 13px;}

      .list_box .news_list li {width: 100% !important;padding: 0 !important;}
      .list_box .news_list li a .photo {display: none !important;}
      .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;}
      .list_box .news_list li a span.date {bottom: 50%;margin-bottom:-10px;right: 0;left: auto;display: inline-block;}
      .list_box .news_list ul li {height: auto !important;}
      .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;height: 100%;}
      .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;line-height: 20px !important;height: 100% !important;}

      .list_box.col1 .news_list li {height: 100% !important;max-width: 100% !important;}
      .list_box.col2 .news_list li {height: 50% !important;max-width: 100% !important;}
      .list_box.col3 .news_list li {height: 33.333% !important;max-width: 100% !important;}
      .list_box.col4 .news_list li {height: 24% !important;max-width: 100% !important;min-width: 100% !important;}
      .list_box.col4 .news_list li:last-of-type {height: 25% !important;max-width: 100% !important;min-width: 100% !important;}
      .list_box.col4 .news_list li a .tit {line-height: 116% !important;height: 30% !important;font-size: 0.9em !important;padding: 2px !important;}
      .list_box.col4 .news_list li a span.date {bottom:1px;padding: 0px 0;color: #211514;position: relative;float: right;display: initial;white-space: nowrap;line-height: 20px;}


      .list_box.col5 .news_list li {height: 20% !important;max-width: 100% !important;}
      .list_box.col6 .news_list li {height: 16.666% !important;max-width: 100% !important;}
      .list_box.col7 .news_list li {height: 14.285% !important;max-width: 100% !important;}
      .list_box.col8 .news_list li {height: 12.5% !important;max-width: 100% !important;}
      .list_box.col9 .news_list li {height: 11.111% !important;max-width: 100% !important;}
      .list_box.col10 .news_list li {height: 10% !important;max-width: 100% !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:200px) {
      .list_box h3 {text-align: left;padding-left: 10px;}
      .list_box.col1 .news_list li a span.date {margin-left: 5px;}
      .list_box .news_list li:last-of-type {float: none;text-align: center;}
      .list_box .news_list li a {display: inline-block;}
    }

    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%;}