@import url('https://fonts.googleapis.com/css2?family=Anybody:ital,wght@0,100..900;1,100..900&family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@media (min-width: 1400px) {
  .container {
      width: 1380px;
  }
}
body{
  font-family: "Mona Sans", sans-serif;
}
.carousel-inner{
  margin-top: 70px;
}



/* default-about */

.about {
  padding: 100px 0 0;
  position: relative; 
  overflow: hidden; 
}
@media (max-width: 480px) {
  .about {
    padding: 80px 0 0;
  }
}
/* 滿版地圖裝飾：不受 container 限制，站滿整個 about 左側 */
.bg-map-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;         /* 佔整個 about 區塊的左半邊 (可依需求微調，如 45% 或 60%) */
  height: 100%;       /* 高度 100% 頂天立地撐滿 */
  background: url(../../images/bg-map-deco.png) no-repeat left center/contain;
  opacity: 1;       /* 淡淡的裝飾效果 */
  z-index: 1;         /* 置於最底層 */
  pointer-events: none; /* 讓滑鼠點擊與選取文字可以穿透底圖，不干擾使用者 */
}



.about-content {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 文字區與圖片區的上下間距 */
}

/* --- 左側文字內容 --- */
.text-wrap {
  width: 100%;
}

/* .section-title  */
.section-title {
  display: flex;
  align-items: center; /* 讓英文、小方塊、中文全部在同一條水平線上對齊 */
  gap: 15px;           /* 英文與中文（含方塊）之間的間距 */
  margin-bottom: 24px;
}

.section-title h2 {
  font-family: "Anybody", sans-serif;
  font-size: 40px;
  text-transform: uppercase;
  color: #16B286;      /* 調整為接近圖片中的綠色 */
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1;
  margin: 0;
}

.section-title .zh-title {
  font-size: 28px;
  color: #000000;
  font-weight: 500;
  margin-bottom: 5px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}


/* 透過偽元素寫出綠色小方塊 */
.section-title .zh-title::before {
  content: "";
  display: inline-block;
  width: 8px;          /* 方塊的寬度 */
  height: 8px;         /* 方塊的高度 */
  background-color: #16B286; /* 方塊的綠色顏色 */
  margin-right: 12px;  /* 小方塊與右邊中文「關於崎貿」的間距 */
  flex-shrink: 0;      /* 防止方塊因為文字擠壓而變形 */
}
@media (max-width: 480px) {
  .section-title {
    flex-direction: column;
    align-items: center;
  }
  .section-title h2 {
    font-size: 32px;
  }
  .section-title .zh-title {
    font-size: 24px;
  }
}
.zh-text {
  font-size: 15px;
  color: #333;
  margin-bottom: 16px;
  text-align: justify;
  letter-spacing: 1.8px;
  line-height: 1.8;
}

.en-text {
  font-size: 13px;
  color: #777;
  text-align: justify;
  line-height: 1.7;
}

/* --- 右側圖片內容 --- */
.img-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 手機版兩張圖片上下排好，並保有安全間距 */
}

.img-box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* 圓角效果 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 輕微的陰影提升質感 */
}



@media (min-width: 992px) {
  .about {
    padding: 150px 0 50px;
  }

  /* 電腦版地圖設定微調 */
  .bg-map-deco {
    width: 50%; 
    background-position: left center;
  }

  /* 網格並排 */
  .about-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 80px; /* 左右文字與圖片的大間距 */
  }

  /* 啟用圖片交疊魔術 */
  .img-wrap {
    position: relative;
    height: 460px;    /* 固定外層高度，供內部絕對定位的圖片進行錯位交疊 */
    display: block;   /* 取消手機版的 flex 彈性盒設定 */
  }

  .img-box {
    position: absolute;
  }

  /* 上層 / 左側的色塊布料圖 */
  .img-top {
    width: 50%;       
    top: 0;
    left: 0;
    z-index: 4;
  }

  /* 下層 / 右側的衣服與塑膠瓶圖 */
  .img-bottom {
    width: 72%;     
    bottom: 0;
    right: 0;
    z-index: 3;
  }
}

/* morn-btn */

.btn-wrap{
  display: flex;
  justify-content: center;
  margin: 40px 0 0;
}
.morn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end; /* 讓內部的圓圈靠右對齊 */
  position: relative;
  width: 180px;
  height: 50px;
  padding: 0 12px; /* 右側圓圈的邊距 */
  border-radius: 30px;
  text-decoration: none;
  box-sizing: border-box;
  
  /* 漸層背景與流動效果核心設定 */
  background-image: linear-gradient(to right, #1cb48b 0%, #76d3b7 50%, #bcebe0 100%);
  background-size: 200% auto;
  background-position: left center;
  transition: background-position 0.5s ease, box-shadow 0.3s ease;
  
  /* 陰影效果（可依需求調整或拔除） */
  box-shadow: 0 4px 15px rgba(28, 180, 139, 0.2);
}

/* 文字絕對置中 */
.morn-btn .text {
  color: #ffffff;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 1px;
    position: absolute;
  left: 50%;
  transform: translateX(-60%);
  pointer-events: none; /* 避免文字干擾點擊 */
}

/* 右側圓圈箭頭 */
.morn-btn .arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #1aa680; /* 預設較深的綠色 */
  color: #ffffff;
  
  /* 動態過渡效果 */
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.3s ease;
}

/* SVG 箭頭大小縮放 */
.morn-btn .arrow-circle svg {
  width: 18px;
  height: 18px;
}

/* ========================================================
   Hover 觸發動畫
   ======================================================== */
.morn-btn:hover {
  /* 1. 背景漸層向左流動 */
  background-position: right center;
  box-shadow: 0 6px 20px rgba(28, 180, 139, 0.35);
}

.morn-btn:hover .arrow-circle {
  /* 2. 圓圈放大 1.15 倍 */
  transform: scale(1.15);
  /* 3. 圓圈變色（這邊調得更深或換色，讓視覺更明顯） */
  background-color: #138264; 
}


/* default-counter */

.counter-wrap {
  padding: 80px 0 0;
  background-color: #fff;
}

.green-banner {
    background: linear-gradient(180deg, #16B286 0%, #0E8F6B 100%);
    color: #ffffff;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 165px; 
}

.image-box {
    position: relative;
    width: 32%;
    flex-shrink: 0;
    margin-top: -77px;
    z-index: 10;
}
.image-box img {
    width: 100%;
    height: auto;
    border-radius: 0 10px 0 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    object-fit: cover;
    aspect-ratio: 1.65; 
}

.stats-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-grow: 1;
    padding: 10px 0;
}

.num-item {
    text-align: center;
    position: relative;
    flex: 1;
}

/* 電腦版直線分隔線 */
.num-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
}

.num-p {
    font-family: "Anybody", sans-serif;
    font-size: 50px;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    width: 100%;
}
@media (max-width: 1200px) {
  .num-p {
      font-size: 30px;
  }
}
.num-count {
    display: inline-block;
}

.num-unit {
    font-size: 20px;
    font-weight: normal;
    margin-left: 6px;
}

.num-title-zh {
    font-size: 17px;
    margin: 8px 0 2px 0;
    font-weight: normal;
    opacity: 0.9;
}

.num-title-en {
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 1.2px;
    margin: 0;
    opacity: 0.6;
    text-transform: capitalize;
}
@media (max-width: 1200px) {
  .num-title-en {
      font-size: 11px;
  }
}
/* ==========================================================================
   手機版 RWD 樣式（微調為 2 個 2 個排版）
   ========================================================================== */
@media (max-width: 992px) {
    .green-banner {
        flex-direction: column;
        align-items: stretch;
        padding: 0 0 20px 0; /* 底部留點內邊距給四宮格 */
    }
    .image-box {
        width: 100%;
        margin: 0 0 50px 0;
    }
    
    /* 1. 允許包覆折行 */
    .stats-container {
        flex-wrap: wrap; 
        padding: 0 10px;
    }
    
    /* 2. 重設單個項目為 50% 寬度（達到一排二個的效果） */
    .num-item {
        flex: none;
        width: 50%;
        margin-bottom: 25px;
        padding: 0 10px;
    }
    
    /* 3. 移除電腦版的分隔線，並重製為精緻的四宮格淡淡格線 */
    .num-item::after {
        display: none; 
    }
    
    /* 幫左邊兩個（1、3）加上右邊框 */
    .num-item:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
    }
    
    /* 微調手機版字型大小防止過擠 */
    .num-p {
        font-size: 34px; 
    }
    .num-title-zh {
        font-size: 17px;
        letter-spacing: 1.2px;
    }
}

/* default-application */

.application{
  padding: 80px 0;
  background-image: url(../../images/application_bg.jpg);
  background-size: cover;
}
@media (max-width: 480px) {
  .application{
    padding: 40px 0;
  }
}
.application .section-title{
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

/* 產品網格佈局 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 桌機版一排 4 個 */
  gap: 30px;                             /* 項目之間的間距 */
  max-width: 1200px;
  margin: 80px auto 40px;
}

/* 單個項目卡片 */
.product-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

/* 圖片外框（還原圖中的圓角與細線） */
.product-img-box {
  width: 100%;
  aspect-ratio: 1 / 1; /* 確保它是正方形 */
  max-width: 220px;    /* 限制最大寬度 */
  border: 1px solid #cccccc;
  border-radius: 24px; /* 圓角效果 */
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  
  /* 預備 Hover 的平滑動態效果 */
  transition: all 0.3s ease-in-out; 
}

/* 圖片本體縮放 */
.product-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 文字樣式 */
.product-name {
  margin-top: 15px;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  letter-spacing: 1px;
  /* 預備 Hover 的文字顏色變換 */
  transition: color 0.3s ease;
}

/* ---------------------------------
   Hover 效果區 
--------------------------------- */
.product-item:hover .product-img-box {
  transform: translateY(-8px); /* 向上微幅浮起 */
  border-color: #16B286;       /* 邊框變色（依據你圖中的綠色系調整） */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); /* 增加輕微陰影 */
}

.product-item:hover .product-name {
  color: #16B286; /* 滑過時文字同步變綠色 */
}

/* ---------------------------------
   RWD 響應式斷點（手機與平板優化）
--------------------------------- */
@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 平板改為一排 2 個 */
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 手機維持 2 個但縮小間距與字體 */
    gap: 15px;
    margin: 40px auto 20px;
  }
  .product-name {
    font-size: 18px;
  }
  .product-img-box {
    border-radius: 16px;
  }
}

/* default-vision */

.vision{
  background-image: url(../../images/vision_bg.jpg);
  background-position: center;
  background-size: cover;
  padding: 80px 0;
}
.vision .text-wrap{
  color: #fff;
  text-align: center;
  letter-spacing: 3.2px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vision .text-wrap h3{
  font-size: 33px;
  font-weight: 400;
  line-height: 1.5;
}
@media (max-width: 480px) {
  .vision .text-wrap h3{
    font-size: 25px;
  }
}
.vision .text-wrap span{
  font-weight: 300;
  line-height: 1.2;
  opacity: 0.8;
}

/* footer */
.footerwrap{
  position: relative;
}
.footer_bg01{
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-image: url(../../images/footer_bg01.png);
  background-repeat: no-repeat;
  opacity: 0.3;
  z-index: 3;
  pointer-events: none;
}
@media screen and (max-width: 992px) {
  .footer_bg01{
    display: none;
  }
}
.footer_bg02{
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background-image: url(../../images/footer_bg02.png);
  filter: brightness(0.1);
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 3;
  pointer-events: none;
}
footer {
  position: relative;
  background-color: #4B4B4B;
  color: #fff;
  letter-spacing: 1.8px;
  line-height: 1.8;
  z-index: 2;
}

footer .content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 50px 20px 15px;
}

@media screen and (max-width: 992px) {
  .footerwrap .content {
    flex-direction: column;
    padding: 40px 20px 20px;
    gap: 30px
  }
}

.footerwrap .logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footerwrap .logo-wrap p {
  font-size: 21px;  
  letter-spacing: 1.5px;
  line-height: 1;
  margin: 5px 5px 0;
}

.footerwrap .logo-wrap span {
  font-size: 12px;
}

.footerwrap .info-wrap {
  padding-left: 50px;
  display: flex;
  justify-content: space-between;
  gap: 80px; 
}
@media screen and (max-width: 992px) {
  .footerwrap .info-wrap {
    padding-left: 0;
    gap: 0; 
  }
}
@media screen and (max-width: 992px) {
  .footerwrap .info-wrap {
    padding: 0;
    flex-direction: column;
    gap: 30px; /* 手機版時上下區塊的間距 */
  }
}

.footerwrap .info-wrap ul {
  font-weight: 300;
  list-style: none; /* 清除預設項目符號 */
  padding: 0;
  margin: 0;
}
.footerwrap .info-wrap .address-en{
  opacity: 0.7;
}

/* ─── 針對右側聯絡資訊對齊的全新 CSS ─── */
.footerwrap .contact-list li {
  display: flex;
  align-items: flex-start; /* 讓多行信箱時，圖示依然對齊第一行 */
  margin-bottom: 8px;      /* 調整電話、傳真、信箱之間的上下間距 */
}

.footerwrap .contact-list .label-box {
  display: flex;
  align-items: center;
  gap: 8px;         /* 圖示與英文之間的間距 */
  width: 110px;     /* 固定英文字欄位寬度，這是後方內容能完美對齊的關鍵 */
  flex-shrink: 0;   /* 防止寬度被壓縮 */
}

.footerwrap .contact-list .info-value {
  flex-grow: 1;
}


/* ────────────────────────────────────── */

footer .copy-text {
  border-top: 1px #f3f3f3c0 solid;
  padding-top: 20px;
  margin: 20px 0;
  opacity: 0.7;
}


/* page-banner */

.page-banner{
  background-image: url(/hipershop/rwd1886/store/F1/page-banner.jpg);
  height: 280px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 70px;
}
@media screen and (max-width: 768px) {
  .page-banner{
    margin-top: 30px;
  }
}
@media screen and (max-width: 480px) {
  .page-banner{
    height: 280px;
  }
}
.page-banner .page-title{
  color: #ffffff;
}

.page-banner h2{ 
  font-family: "Anybody", sans-serif;
  font-size: 50px;
  opacity: 0.5;
}
.page-banner h3{ 
  font-size: 28px;
  margin: 0;
  text-align: center;
}
.page-banner h3::after{ 
  content: "";
  display: block;
  border-bottom: #fff 1px solid;
  padding-bottom: 10px;
  width: 100px;
  margin: 0 auto;
}

/* categery */
.nav_cate_item{
  border-radius: 10px;
  margin: 10px 0;
}
aside .nav li a{
  color: #939393;
  background: #f3f3f3;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;

}
/* 商品頁、商品清單列，側邊導覽列 回饋效果 */
.category-wrapper aside .nav li a:hover, 
.product-wrapper aside .nav li a:hover, 
.category-wrapper aside .nav li a.topic, 
.product-wrapper aside .nav li a.topic,
.category-wrapper aside .nav li a:focus,
.product-wrapper aside .nav li a:focus 

{
  /* background-color: #a1bd46; */
  background: linear-gradient(to right, #1cb687, #91e5c7);
  color: #fff;
}


.breadcrumb{
  background-color: transparent;
  float: right;
  margin: 20px 0;
}
@media screen and (max-width: 480px) {
  .breadcrumb{
    float: none;
  }
}
ol.breadcrumb li a{
  font-size: 14px;
}
.breadcrumb span{
  font-size: 14px;
}
.aside-title{
  background-color: transparent;
}
.aside-title nav{
  padding: 0 20px;
}
.category-wrapper .imgBox-inner
.product-wrapper .imgBox-inner{
  border: 1px #bbb solid;
  border-radius: 10px;
}
.category-wrapper .li-item:hover,
.product-wrapper .li-item:hover{
  box-shadow: none;
}
.prd_info {
  font-size: 18px!important;
  padding: 20px 0;
}
.hero-feature{
  margin-top: 30px;
}
#category_descr{
  padding: 0 20px;
}

@media screen and (max-width: 480px) {
  #category_descr{
    padding: 0;
  }
}
.features-box a h4 {
    font-size: 20px;
    padding: 7px 10px 5px;
    white-space: normal;
    transition: all 0.3s;
    line-height: 1.3;
    text-align: center;
    color: #000 !important;
}
.li-item:hover {
    box-shadow: none;
    background-color: transparent;
}
.btn_detailed,
.features-box p.prd_info{
  display: none;
}
.thumbnail-list img {
  border-radius: 10px;
}
.thumbnail-list .view {
    transition: all .25s ease;
}
.thumbnail-list .view:hover {
    transform: scale(1.05);
}
.sub_box{
  display: none;
}
#category_parent_link{
  display: none;
}
.category-wrapper .nav .C1{
  display: none;
}

/* contact */
.contact-wrapper .form-control{
  border: none;
}
.contact-wrapper .form-control{
  display: block;
  width: 100%;
  height: 45px;
  padding: 10px 0;
  font-size: 15px;
  line-height: 1.42857143;
  color: #555;
  background-image: none;
  border-bottom: 1px #ddd solid;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-transition: none;
  -o-transition: none;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.contact-wrapper .content-wrap{
  /* display: flex;
  justify-content: space-between; */
  background-color: #fff;
  margin-top: 50px;
}
@media screen and (max-width: 1200px) {
  .contact-wrapper .content-wrap{
    /* flex-direction: column;
    align-items: center; */
    margin: 30px 10px;
  }
}
.contact-wrapper .img-wrap{
  background-image: linear-gradient(rgba(18, 18, 20, 0.4), rgba(0, 0, 0, 0.4)), url(/hipershop/rwd1798/store/F1/contact.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover
}
@media screen and (max-width: 1200px) {
  .contact-wrapper .img-wrap{
    max-width: 100%
  }
}

.contact-wrapper .form-group{
  margin: 25px 0;
}
.contact-wrapper .form-wrap {
  padding: 70px 180px;
}
@media screen and (max-width: 992px) {
  .contact-wrapper .form-wrap {
    padding: 50px 40px;
  }
}
@media screen and (max-width: 480px) {
  .contact-wrapper .form-wrap {
    padding: 50px 20px;
  }
}
.contact-wrapper .form-group .control-label {
  font-size: 16px;
  margin: 0;
  text-align: left;
}

.contact-wrapper .btn-info{
  color: #fff;
  background-color: #16B286;
  border-color: transparent;
  border-radius: 0;
  padding: 10px 40px;
  margin: 20px 0;
  transition: all 0.3s;
}
.contact-wrapper .btn-info:hover{
  color: #16B286;
  background-color: #fff;
  border-color: #61c7aa;;
}
.contact-wrapper .has-error .form-control:focus{
  box-shadow: none;
}

/* page-news */
.news-wrapper .news-content{
  margin: 30px 10px 0;
}
.news_author{
    display: none;
}


.newsitem{
    margin-bottom: 20px;
    padding: 0 20px;
  }


@media screen and (max-width: 480px){
    .headlinecate{
        border: transparent;
        border-radius: 0px;
        margin: 0;
    }
}
.headlinecate img{
    display: none;
}

.news-wrapper .newsbar{
  display: none;
}
.news-wrapper .thumbnail{
    border: none;
    border-bottom: 1px #cccccc solid;
    background-color: transparent;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
.newslist img.news_pic{
    margin: 0 30px 0 0;
    padding: 0;
    border-radius: 10px;
    border: 1px #d2d7db solid;
    transition: all 0.3s;
}
@media screen and (max-width: 560px){
    .newslist img.news_pic{
        margin: 0 0 20px 0;
        width: 100%;
    }
}
.newslist :hover img{
    transform: scale(1.03);
}
.newslist .newslist img:hover .news_title{
    color: #7B9AB9;
}

.news-list .news_imgBox-fit{
  overflow: hidden;
  display: block;
}
.caption p{
    margin: 20px 0;
    letter-spacing: 1.2px;
    font-weight: 500;
    color: #7d7d7d;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media screen and (max-width: 768px){
    .caption p{
        margin: 0 0 10px 0;
    }
}
.news_date{
  letter-spacing: 0.5px;
  font-size: 16px;
  min-width: 103px;
  font-weight: 500;
  color: #5B5050;
}
.news_date img{
    display: none;
}
.news_sort{
  display: none;
}
.news_sort img{
    display: none;
}
.news_author{
  display: none;
}
.news_more:hover,
.news_more:focus{
  background-color: #bf9f75;
  color: #fff;
}
#LinkContainer h1.news_title{
    padding: 0 20px;
}
.news-wrapper .btn-default{
    border-radius: 0px;
    padding: 10px 30px;
    transition: all.2s ;
}
.news p{
    padding-left: 20px;
}
.descri-none {
    font-size: 15px;
    letter-spacing: 1.5px;
    line-height: 1.5;
    margin: 20px 0;
}   
/* .news-wrapper h1.news_title{
  padding: 0;
} */
.news-wrapper .article-content{
  margin: 20px 0;
}
.news-wrapper .arti-news{
  margin: 0;
  text-align: center;
}
.news-wrapper .news_content{
  margin: 0;
}
.news-content .arti-news > img{
  margin: 20px 0;
  max-width: 800px;
}
.pagination>.active>a{
    transition: all.3s;
}
.pagination>.active>a, 
.pagination>.active>a:focus, 
.pagination>.active>a:hover,
.pagination>li>a:focus,
.pagination>li>a:hover{
    background-color: #999;
    border-color: transparent;
}
@media screen and (max-width: 768px) {
    .news-wrapper h2.aside-title:after {
        color: #555;
        font-weight: 400;
    }
}
.NEWS_type li {
    font-weight: 600;
    transition: all .3s linear;
    display: block;
    margin-bottom: 10px;
    max-width: 200px;
}
@media screen and (max-width: 768px) {
    .NEWS_type li {
      max-width: none;
  }
}
.NEWS_type li a {
  background: linear-gradient(to right, #949a9c, #537780);
  color: #fff;
  font-size: 17px;
  letter-spacing: 1.5px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 6px;
  text-align: center;
}
.NEWS_type .badge{
  display: none;
}
.news_title{
  font-weight: 600;
  font-size: 25px;
}