/* ----------------------------------------------------------
General Settings
---------------------------------------------------------- */
.nwic00 {
  background-color: rgb(153, 153, 153);
}
.nwic01 {
  background-color: rgb(38, 161, 192);
}
.nwic02 {
  background-color: rgb(25, 177, 81);
}
.nwic03 {
  background-color: rgb(231, 121, 48);
}
.nwic04 {
  background-color: rgb(251, 93, 93);
}

/* ----------------------------------------------------------
Style for Smartphone
---------------------------------------------------------- */
@media screen and (max-width: 768px) {

  .newslist ul {
    width:100%;
    height: auto;
    display: block;
  }

  .newslist ul li {
    padding:0 0 25px 0;
    border-bottom: 1px dotted var(--color-ccc);
    margin:0 0 25px 0;
    display: flex;
  }
  .newslist ul li .newsimg {
    width:30%;
    border-radius: 5%;
    overflow: hidden;
  }
  .newslist ul li .newsimg a {
    width:100%;
    height: auto;
    display: block;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li .newsimg a:hover {
    opacity: 0.6;
  }
  .newslist ul li .nwcc {
    width:65%;
    height: auto;
    display: block;
    margin-left:auto;
  }
  .newslist ul li .nwcc p.nwdate {
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 1em;
    margin-bottom: 0px;
    color:var(--color-1st);
    margin-bottom: 5px;
    text-align: right;
  }
  .newslist ul li .nwcc h3 {
    width:-moz-fit-content;
    width:fit-content;
    height: 20px;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 20px;
    padding:0 5px;
    color:var(--color-white);
    border-radius: 3px;
    margin-bottom:5px;
  }
  .newslist ul li .nwcc h4 {
    min-height: 3em;
    font-size: clamp(18px, 1vw, 24px);
    font-weight: 700;
    line-height: 1.5em;
    margin-bottom: 0.5em;
    color:var(--color-black);
  }
  .newslist ul li .nwcc h4 a {
    text-decoration: none;
    color: var(--color-black);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li .nwcc h3 a:hover {
    color:var(--color-1st);
  }
  .newslist ul li .nwcc p.nwcomment {
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 400;
    line-height: 2em;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .newslist ul li p.detailbn {
    width:120px;
    height: 26px;
    display: block;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 26px;
    margin-left:auto;
  }
  .newslist ul li p.detailbn a {
    width:100%;
    height: 26px;
    display: block;
    text-decoration: none;
    padding-right:15%;
    background-image: url(../img/header/ic-ar.png);
    background-repeat: no-repeat;
    background-position: 92% center;
    background-size: auto 80%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li p.detailbn a:hover {
    background-position: 100% center;
  }

}

/* ----------------------------------------------------------
Style for iPad Pro
---------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  .newslist ul {
    width:100%;
    height: auto;
    display: block;
  }

  .newslist ul li {
    padding:0 0 25px 0;
    border-bottom: 1px dotted var(--color-ccc);
    margin:0 0 25px 0;
    display: flex;
  }
  .newslist ul li .newsimg {
    width:30%;
    border-radius: 5%;
    overflow: hidden;
  }
  .newslist ul li .newsimg a {
    width:100%;
    height: auto;
    display: block;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li .newsimg a:hover {
    opacity: 0.6;
  }
  .newslist ul li .nwcc {
    width:65%;
    height: auto;
    display: block;
    margin-left:auto;
  }
  .newslist ul li .nwcc p.nwdate {
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 1em;
    margin-bottom: 0px;
    color:var(--color-1st);
    margin-bottom: 5px;
    text-align: right;
  }
  .newslist ul li .nwcc h3 {
    width:-moz-fit-content;
    width:fit-content;
    height: 20px;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 20px;
    padding:0 5px;
    color:var(--color-white);
    border-radius: 3px;
    margin-bottom:5px;
  }
  .newslist ul li .nwcc h4 {
    min-height: 3em;
    font-size: clamp(18px, 1vw, 24px);
    font-weight: 700;
    line-height: 1.5em;
    margin-bottom: 0.5em;
    color:var(--color-black);
  }
  .newslist ul li .nwcc h4 a {
    text-decoration: none;
    color: var(--color-black);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li .nwcc h3 a:hover {
    color:var(--color-1st);
  }
  .newslist ul li .nwcc p.nwcomment {
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 400;
    line-height: 2em;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .newslist ul li p.detailbn {
    width:35%;
    height: 26px;
    display: block;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 26px;
    margin-left:auto;
  }
  .newslist ul li p.detailbn a {
    width:100%;
    height: 26px;
    display: block;
    text-decoration: none;
    padding-right:15%;
    background-image: url(../img/header/ic-ar.png);
    background-repeat: no-repeat;
    background-position: 92% center;
    background-size: auto 80%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li p.detailbn a:hover {
    background-position: 100% center;
  }

}

/* ----------------------------------------------------------
Style for PCs
---------------------------------------------------------- */
@media screen and (min-width: 1025px) {

  .newslist ul {
    width:100%;
    height: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .newslist ul li {
    width:31.3333333333333%;
    margin:0.5% 1%;
    display: flex;
    flex-direction: column;
  }
  .newslist ul li .newsimg {
    width:100%;
    height: auto;
    display: block;
    border-radius: 5%;
    overflow: hidden;
  }
  .newslist ul li a img {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li a:hover img {
    opacity: 0.6;
  }
  .nwcc {
    flex:1;
    width:100%;
    height: auto;
    display: block;
    padding:25px 5px 15px;
  }
  .newslist ul li .nwcc p.nwdate {
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 1em;
    margin-bottom: 0px;
    color:var(--color-1st);
    margin-bottom: 5px;
    text-align: right;
  }
  .newslist ul li .nwcc h3 {
    width:-moz-fit-content;
    width:fit-content;
    height: 20px;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 400;
    line-height: 20px;
    padding:0 5px;
    color:var(--color-white);
    border-radius: 3px;
    margin-bottom:5px;
  }
  .newslist ul li .nwcc h4 {
    min-height: 3em;
    font-size: clamp(18px, 1vw, 24px);
    font-weight: 700;
    line-height: 1.5em;
    margin-bottom: 0.5em;
    color:var(--color-black);
  }
  .newslist ul li .nwcc h4 a {
    text-decoration: none;
    color: var(--color-black);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li .nwcc h4 a:hover {
    color:var(--color-1st);
  }
  .newslist ul li .nwcc p.nwcomment {
    font-size: clamp(12px, 1vw, 16px);
    font-weight: 400;
    line-height: 2em;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .newslist ul li p.detailbn {
    width:120px;
    height: auto;
    display: block;
    font-size: clamp(0.8em, 1vw, 14px);
    font-weight: 400;
    line-height: 26px;
    margin:0 auto 0px;
  }
  .newslist ul li p.detailbn a {
    width:100%;
    height: 26px;
    text-decoration: none;
    display: block;
    padding-right:25%;
    background-image: url(../img/header/ic-ar.png);
    background-repeat: no-repeat;
    background-position: 92% center;
    background-size: auto 80%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
  .newslist ul li p.detailbn a:hover {
    background-position: 100% center;
  }

}