/*---------------
news
---------------*/

/*------ header -----*/
.news-header{
  margin: 120px auto 57px;
  max-width: 964px;
}
.news-head {
  max-width: 300px;
}
.news-title {
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--main-color);
}
.news-subtitle {
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--main-color);
}
.news-breadcrumb {
}
.news-breadcrumb a{
}
.news-breadcrumb span{
  opacity: 0.6;
}
.news-breadcrumb-dt {
  position: absolute;
  top: -32px;
  color: var(--text-sub);
}
.news-breadcrumb-dt a{
  color: var(--text-sub);
}
.news-breadcrumb-dt span{
  color: var(--text-sub);
  opacity: 0.6;
}
@media all and (max-width: 786px){
  .news-header{
    margin: 159px 20px 16px;
    max-width: 100%;
  }
  .news-head {
    max-width: calc(100% - 40px);
  }
  .news-title {
    margin-bottom: 8px;
  }
  .news-subtitle {
    margin-bottom: 16px;
  }
  .news-breadcrumb {
  }
  .news-breadcrumb span{
  }
  .news-breadcrumb-dt {
    color: var(--text-main);
  }
  .news-breadcrumb-dt a{
    color: var(--text-main);
  }
  .news-breadcrumb-dt span{
    color: var(--text-main);
  }
}
/*------ mainContent -----*/
.news-wrap{
}
@media all and (max-width: 786px){
  .news-wrap{
  }
}

/*---------------
single
---------------*/
#mainContent{
  width: 100%;
  margin: 0;
  max-width: 100%;
  background: #f5f5f5!important;
}
.mainContentHead{
  position: absolute;
  z-index: -1;
  height: 265px;
  width: 100%;
  background: linear-gradient(to bottom, #4644AD 0%, #5F70D3 50%, #85A7FF 100%);
}
#mainContentInner{
  padding-top: 0!important;
  max-width: 880px;
}
#jinrArticle{
  background: #f5f5f5!important;
}
.content-menu-bar{
  display: flex;
  justify-content: space-between;
}
#snsShareBottom{
  background: transparent!important;
}
ul.o--sns-share-inner{
  display: flex;
  justify-content: right;
}
ul.o--sns-share-inner li{
  margin-right: 24px;
}
ul.o--sns-share-inner li:last-child{
  margin-right: 0;
}
@media all and (max-width: 786px){
  #mainContent{
    margin: 0 0 50px 0;
  }
  .mainContentHead{
    height: 214px;
  }
  #mainContentInner{
    padding-top: 0!important;
    max-width: 100%;
  }
  #jinrArticle{
    margin: 0 auto;
    padding-top: 60px;
  }
  .content-menu-bar{
  }
  #snsShareBottom{
  }
  ul.o--sns-share-inner{
  }
  ul.o--sns-share-inner li{
  }
  ul.o--sns-share-inner li:last-child{
  }
}

/*----- contents-list -----*/
#postHeader{
  margin-bottom: 40px;
}
.postHeaderInner{
  padding: 40px;
  background: #fff;
  width: 100%;
}
.postHeaderInner > span{
  height: auto;
  margin: 24px 0;
  border-bottom: 1px solid;
  display: block;
  width: 50px;
  color: var(--main-color);
}
#jinrPostMeta{
  font-weight: 500;
}
.cts-thum{
  height: 170px;
  width: 100%;
}
.cts-thum img{
  height: 170px;
  width: 100%;
  object-fit: cover;
}

.cts-ct {
    color: var(--text-sub);
    height: 46px;
    line-height: 46px;
    width: 100%;
    padding: 0 0 0 10px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.cts-ct::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, rgba(190, 190, 190, 1), rgba(255, 255, 255, 0));
    z-index: -1;
    transition: opacity 0.5s ease;
}

.cts-ct::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, rgba(190, 190, 190, 1), rgba(190, 190, 190, 1));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.top-jn-cts ul li:hover .cts-ct::before,
.related-li ul li:hover .cts-ct::before,
.jn-pickup-r ul li:hover .cts-ct::before,
.jn-latest-li ul li:hover .cts-ct::before {
    opacity: 0;
}

.top-jn-cts ul li:hover .cts-ct::after,
.related-li ul li:hover .cts-ct::after,
.jn-pickup-r ul li:hover .cts-ct::after,
.jn-latest-li ul li:hover .cts-ct::after {
    opacity: 1;
}
.cts-title{
  font-weight: bold;
  margin: 16px 0;
  color: #212121!important;
}
.cts-des{
  color: #212121!important;
}
#postContent{
  max-width: 880px!important;
}

@media all and (max-width: 786px){
  .postHeaderInner{
    padding: 24px;
  }
  .cts-thum{
    height: 100px;
  }
  .cts-thum img{
    height: 100px;
  }
  .cts-ct{
    height: 34px;
    line-height: 34px;
    padding: 0 0 0 14px;
  }
  .cts-title{
    margin: 16px 0 14px;
    white-space: normal;
  }
  .cts-des{
  }
  #wk-contents .cts-ct::before{
    background: transparent;
  }
  #wk-contents .cts-ct::aftger{
    background: transparent;
  }
  #postContent{
    padding: 0!important;
  }
}

/*---------------
return
---------------*/
#news-return{
  height: 60px;
  width: 964px;
  margin: 100px auto 0;
  padding-bottom: 800px;
}
#single-return{
  height: 60px;
  width: 880px;
  margin: 100px auto 0;
  padding-bottom: 800px;
}
.news-return,.single-return{
  height: 60px;
  width: 240px;
  padding: 20px 45px 20px 24px;
  display: flex;
  background: #fff;
  filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
}
.news-return .news-return-inner,.single-return .single-return-inner{
  display: flex;
  justify-content: space-between;
  height: 60px;
  width: 240px;
}
.news-return .news-return-inner img,.single-return .single-return-inner img {
  transition: transform 0.3s ease-out;
  height: 5px;
  width: 51.5px;
  margin: 7.5px 0;
}
.news-return .news-return-inner p,.single-return .single-return-inner p {
  color: var(--main-color);
  font-weight: bold;
  margin: 0;
}
.news-return .news-return-inner:hover img,.single-return .single-return-inner:hover img{
  transform: translateX(-10px);
}

@media all and (max-width: 786px){
  #news-return,#single-return{
    height: 60px;
    width: 100%;
    margin: auto;
    padding-bottom: 950px;
  }
  .news-return,.single-return{
    height: 60px;
    width: 240px;
    padding: 20px 45px 20px 24px;
    margin-left: 20px;
    display: flex;
    background: #fff;
    filter: drop-shadow(0px 4px 16px rgba(0,0,0,0.12));
  }
  .news-return .news-return-inner,.single-return .single-return-inner{
    display: flex;
    justify-content: space-between;
    height: 60px;
    width: 240px;
  }
  .news-return .news-return-inner img,.single-return .single-return-inner img {
    transition: transform 0.3s ease-out;
    height: 5px;
    width: 51.5px;
    margin: 7.5px 0;
  }
  .news-return .news-return-inner p,.single-return .single-return-inner p {
    color: var(--main-color);
    font-weight: bold;
    margin: 0;
  }
  .news-return .news-return-inner:hover img,.single-return .single-return-inner:hover img{
    transform: translateX(-10px);
  }
}