/*############################ sc-article ###################################*/
.icw a.link {
  font-weight: 600;
  color: #00A94F;
  text-decoration: underline;
}
.icw .text-light {
  color: #fffFFF !important;
}
.swiper-button-next, 
.swiper-button-prev  {
  display: none !important;
}
.sc-article{
  background: urL(/SiteCollectionDocuments/personal/insure/life/90-5/img/suggest-bg-mb.jpg) !important; 
  overflow: hidden;}
.sc-article .bg{pointer-events: none;}
.sc-article .bg > img { position: absolute; width: 100%; max-width: 1405px; top: -291px; right: -35%;}
.sc-article .sc-inner{padding: 64px 0;}
.sc-article .sc-heading{text-align: center; margin-bottom: 40px;}
.sc-article .sc-heading .title{line-height: 1.5em; margin-bottom: 0; color: var(--cr-dark);}
  
.article-list{position: relative; margin: 0 -16px; padding: 0 16px; overflow: visible;}
.article-list .swiper-slide{transition: var(--tsition); opacity: 0; pointer-events: none;}
.article-list .swiper-slide.swiper-slide-active{opacity: 1; pointer-events: visible;}
.article-list .swiper-pagination{display: none;}
.article-list .wrapper{display: flex; flex-wrap: nowrap; align-items: center; width: 100%;}
.article-list .thumb {max-width: 700px; width: 200%; position: relative; border-radius: 8px 0 0 8px; z-index: 20;}
.article-list .content { width: 100%; height: auto; display: flex; flex-direction: column; height: 420px; box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
    padding: 48px 56px 56px; background: rgba(255,255,255,0.9); border-radius: 0px 8px 8px 0px; backdrop-filter: blur(20px);
}
.article-list .content h3{ color: #333;  font-size: 16px;  font-style: normal; font-weight: 600; line-height: normal; margin-bottom: 8px;
    height: 2.9em; overflow: hidden; display: -webkit-box; line-height: 1.5em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.article-list .content small{ font-size: 13px;  font-weight: 500; color: #666; margin-bottom: 24px; line-height: 1.5em; min-height: 1.5em;}
.article-list .content .c-g{ font-size: 16px;  font-weight: 500; color: #666;
    height: 2.8em; overflow: hidden; display: -webkit-box; line-height: 1.4em;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; margin-bottom: 0;
}
.article-list .content .action{margin-top: 16px; text-align: left;}
.article-list .content .action .btn.btn-pay{ border-radius: 8px; background-color: #00A94F; display: inline-flex; align-items: center; justify-content: center;
    color: var(--cr-light);  font-size: 16px; font-weight: 600; padding: 0 32px; height: 45px; /*box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);*/
    width: auto; max-width: inherit; transition: var(--tsition);
}
.article-list .content .action .btn.btn-pay:hover{ background-color: #0BC160;}

.article-list .thumb {max-width: 580px; max-height: 219px;}
.article-list .content{height: 348px; padding: 40px 48px 48px;}

.article-list{padding: 0; margin: 0; overflow: visible;}
.article-list .swiper-slide{opacity: 1; pointer-events: visible;}
.article-list .swiper-slide.swiper-slide-active{opacity: 1; pointer-events: visible;}
.article-list .swiper-pagination{display: block; padding-top: 16px !important;width: auto;margin: auto !important;}
.article-list .swiper-slide{width: auto;}
.article-list .wrapper{display: block; width: 100%; max-width: calc(100% - 32px); margin: 0 auto;}
.article-list .thumb{border-radius: 8px 8px 0 0; max-width: 100%;}
.article-list .content{padding: 24px; border-radius: 0 0 8px 8px; height: auto;}

.article-list .content .action .btn.btn-pay{width: 100%;}
.sc-article .sc-heading{margin-bottom: 32px;}
.sc-article .sc-inner{padding: 40px 0;}

.article-list.swiper-free-mode>.swiper-wrapper{justify-content: inherit;}
/* .article-list .swiper-pagination{padding-top: 16px;} */
/* .article-list .swiper-slide{width: auto !important; } */

.article-list .content{padding: 16px 24px 24px;}
.article-list .content .action .btn.btn-pay{width: 100%;}

.article-list .swiper-pagination{width: 160px !important;}
.article-list .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{
  transform: scale(.66);
}
.article-list .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{
  transform: scale(.66);
}

@media screen and (min-width:992px) {
  .sc-article .sc-inner{padding: 64px 0;}
  .sc-article{
    background: urL(/SiteCollectionDocuments/personal/insure/life/90-5/img/suggest-bg-pc.jpg) !important; 
    overflow: hidden;
  }
  .article-list{overflow: hidden;}
  .article-list .content h3{font-size: 18px;}
  .article-list .wrapper{display: block; width: 100%; max-width: 364px; margin: 0 auto;}
}
@media screen and (max-width: 767px) {
  .article-list .thumb {
    max-height: 178px;
  }
}

/*============================== swiper ===============================*/
.swiper-button-next, 
.swiper-button-prev{position: absolute; top: 48%; box-shadow: 0 3px 6px rgba(0, 0, 0, .26);
  z-index: 1; font-size: 0; background-color: #fffFFF; overflow: hidden; width: 40px; height: 40px;
  border-radius: 50%; transform: translate(0, -50%); display: flex; align-items: center;
}
.swiper-button-next{right:0px;} 
.swiper-button-prev{left:0px;}
.swiper-button-next:after, 
.swiper-button-prev:after {display: none;}
.swiper-button-next:before,
.swiper-button-prev:before { content: ''; display: inline-block;width: 10px;height: 10px; position: relative; top: 0;
  border-top: 2px solid #256D47; border-left: 2px solid #256D47; visibility: visible; 
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 2px;
}
.swiper-button-next:before { left: -2px;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal, 
.swiper-pagination-custom, .swiper-pagination-fraction,
.swiper-pagination{
  text-align: center; 
  /* margin: 0;  */
  /* padding-top: 32px;  */
  position: relative; 
  bottom: 0;
}
.swiper-pagination-bullet{font-size: 0; line-height: 0; margin: 0; padding: 0; cursor: pointer; margin: 0 4px; border: 1px solid #DDDDDD;
  outline: none;width: 8px; height: 8px; border-radius: 8px; background: #fffFFF; opacity: 1; transition: .3s ease-in-out;
}
.swiper-pagination-bullet-active{background: #00A94F; border-color: #00A94F; opacity: 1; width: 24px;}

@media screen and (max-width: 767px){
  .swiper-button-next, 
  .swiper-button-prev{width: 35px; height: 35px;}

  .swiper-horizontal>.swiper-pagination-bullets, 
  .swiper-pagination-bullets.swiper-pagination-horizontal, 
  .swiper-pagination-custom, .swiper-pagination-fraction,
  .swiper-pagination{padding-top: 24px;}
}