/*********************************************************************************************
              Sub Contents Style css
                        *** list style ***
*****************************/
.sub-wrapper .content .content-wrap {
  margin: 0px; padding: 0;
}
.content-wrap > ul > li {
  width: 100%;
  margin-top: 20px;
}
.content-wrap > ul > li:first-child {
  margin-top: 0;
}
.content-wrap > ul > li .box-list {
  border: 1px solid var(--bis-color-light-gray);
  border-radius: 10px;
}
.content-wrap > ul > li .box-list figure {
  display: inline-block;
  width: 250px; height: 200px;
  margin: 20px; margin-right: 0px;
}
.content-wrap > ul > li .box-list figure img {
  width: 100%; height: 100%;
}
.content-wrap > ul > li .box-list .cont-inner {
  display: inline-block;
  width: auto;
  margin: 20px; margin-left: 50px;
  vertical-align: top;
}
.content-wrap > ul > li .box-list a figure+.cont-inner {
  width: calc(100% - 340px);
}
.content-wrap > ul > li .box-list .cont-inner span.ctgrWrap {
  display: block;
  margin-top: 10px;
  font-size: var(--bis-font-size-12); font-weight: 800;
  color: var(--bis-color-blue);
}
.content-wrap > ul > li .box-list .cont-inner span.date {
  display: block;
  font-size: var(--bis-font-size-12); font-weight: 400; color: var(--bis-color-gray);
  margin-top: 10px;
}
.content-wrap > ul > li .box-list strong {
  display: block;
  font-size: var(--bis-font-size-18);
  margin-top: 10px;
}
.content-wrap > ul > li .box-list p {
  padding-top: 20px; line-height: 140%;
}

.content-wrap > ul > li .box-list:hover {
  background-color: var(--bis-color-light-silver);
}
.content-wrap > ul > li .box-list:hover .cont-inner span.ctgrWrap {
  color: var(--bis-color-orange);
}
.content-wrap > ul > li .box-list:hover strong {
  color: var(--bis-color-blue);
}

/********************************** View style */
.sub-wrapper .content .content-wrap .view-subject-wrap {
  border-top: 3px solid var(--bis-color-black);
  padding: 30px 0;
  text-align: center;
  vertical-align: top;
  border-bottom: 1px solid var(--bis-color-light-gray);
}
.view-subject-wrap strong {
  display: block;
  font-size: var(--bis-font-size-22);
}
.view-subject-wrap .categoryWrap {
  display: inline-block;
  margin-top: 20px;
  text-align: center; vertical-align: top;
}
.categoryWrap span {
  display: inline-block;
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  background-color: var(--bis-color-orange);
}
.categoryWrap span:after {
  content: "T";
  position: absolute; top: 55%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--bis-font-size-18); font-weight: 700;
  color: var(--bis-color-white); text-align: center;
}
.categoryWrap label {
  font-size: var(--bis-font-size-15); font-weight: 400;
  padding-left: 20px; line-height: 42px;
  vertical-align: top;
}
.view-subject-wrap .dateyWrap {
  position: relative;
  display: inline-block;
  margin: 20px 0 0 30px;
  padding-left: 30px; line-height: 42px;
  font-size: var(--bis-font-size-15); font-weight: 400;
  color: var(--bis-color-gray);
}
.view-subject-wrap .dateyWrap:before {
  content: "";
  position: absolute; top: 13px; left: 0px;
  width: 1px; height: 18px;
  background-color: var(--bis-color-light-gray);
}

.sub-wrapper .content .content-wrap .view-cont-wrap {
  margin: 50px; margin-bottom: 0px;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--bis-color-light-gray);
}
.sub-wrapper .content .content-wrap .view-cont-wrap p {
  line-height: 160%;
}



/*********************************************************************************************
              Mobile Style css
                        *** 500미만 style ***
*****************************/
@media only screen and (max-width:699px) and (min-width:280px){
  /********************** 해상도 700 이상 태블릿 css */
  .content-wrap > ul > li .box-list {
    margin: 0 -1px;
  }
  .content-wrap > ul > li .box-list figure {
    display: inline-block;
    width: 90%;
    height: 200px;
    margin: 20px 5%;
  }
  .content-wrap > ul > li .box-list a figure+.cont-inner {
    width: 90%;
  }
  .content-wrap > ul > li .box-list .cont-inner {
    display: inline-block;
    margin: 0 5% 20px;
    margin-left: 5%;
  }
  .content-wrap > ul > li .box-list .cont-inner span.ctgrWrap {
    display: block;
    margin-top: 0px;
  }
  .content-wrap > ul > li .box-list p {
    padding-top: 20px;
  }
  .sub-wrapper .content .content-wrap .view-cont-wrap {
    margin: 30px 5%;
  }
}

/********************** 해상도 568이상 css */
@media only screen and (max-width:699px) and (min-width:500px) {
  /********************** 해상도 700 이상 태블릿 css */
  .content-wrap > ul > li .box-list figure {
    display: inline-block;
    width: 92%;
    height: 300px;
    margin: 20px 4%;
  }
}