/*£º https://www.17sucai.com()*//*£º https://www.17sucai.com()*/


/* »ù´¡ÈÝÆ÷ÐÎ×´ - Ψһ¶¨ÃûÔ¤·Àì¶Ü */
.custom-five-col-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  /* PC¶Ë¹Ì¶¨¿í¶È */
  width: 900px;
  /* µ¯ÐÔ²¼¾ÖʵÏÖÎåÁÐ */
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  /* ÈÝÆ÷¼ÓÕûÌå±ß¿ò£¨½â¾öÄÚ²¿LI±ß¿ò³Á¸´µÄÖ÷Ì⣩ */
  border: 1px solid #ddd;
  border-radius: 2px; /* ¿ÉÑ¡£ºÇá΢Բ½Ç¸üÃÀ¹Û */
  overflow: hidden; /* Ô¤·ÀÄÚ²¿LI±ß¿òÒç³öÈÝÆ÷ */
}

/* ÁбíÏî»ù´¡ÐÎ×´ - ³Á¹¹±ß¿òÂß¼­ + »Ö¸´Ô­ÓÐ¸ß¶È */
.custom-five-col-list__item {
  /* PC¶ËµÈ·ÖÎåÁÐ */
  width: 20%;
  color: #000;
  background-color: #fff;
  /* ÒƳýÔ­ÓÐborder
£¬¸ÄΪ½ö¸ø·ÇÊ׸öLI¼Ó×ó²à·Ö¸ôÏߣ¨Ô¤·À³Á¸´£© */
  border-left: 1px solid #ddd;
  /* ¹Ì¶¨Äڱ߾à
£¬±£ÕÏLIÔ­Óи߶ȣ¨Ö÷Ì⣺¸´Ô­¸ß¶È£© */
  padding: 18px 8px; /* µ÷´ó¸ßµÍpadding
£¬¸´Ô­Ö®Ç°µÄ¸ß¶È */
  /* ÎÄ×Ö¾ÓÖÐ */
  text-align: center;
  /* ºÐÄ£ÐÍÔ̺¬±ß¿ò */
  box-sizing: border-box;
  /* ¹ý¶É¶¯»­¸üÁ÷³© */
  transition: all 0.3s ease;
  /* »ù´¡×ֺŠ*/
  font-size: 18px;
  /* Êó±êÐü¸¡ÏÔʾÊÖÐÍ */
  cursor: pointer;
  /* ÈÃLIÄÚµÄa±êÇ©Õ¼ÂúÕû¸öLI */
  position: relative;
  /* Ç¿Ôì±£ÕÏLI×îÓ׸߶È
£¬Ô¤·À¸ß¶ÈËúÏÝ£¨¹Ø¼ü£© */
  min-height: 64px; /* ƾ¾ÝÐèÒªµ÷Õû
£¬È·±£¸ß¶ÈºÍ֮ǰһÖ */
}

/* µÚÒ»¸öLIÒƳý×ó²à·Ö¸ôÏߣ¨Ô¤·ÀÈÝÆ÷×ó±ß¿ò+LI×ó±ß¿ò³Á¸´£© */
.custom-five-col-list__item:first-child {
  border-left: none;
}

/* LIÄÚµÄÁ´½ÓÐÎ×´ - Ö÷ÌâÊÊÅä + ²»Ó°Ïì¸ß¶È */
.custom-five-col-list__item a {
  /* Õ¼ÂúÕû¸öLI */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ÎÄ×Ö¾ÓÖУ¨´¹Ö±+ˮƽ£© */
  display: flex;
  align-items: center;
  justify-content: center;
  /* ÒƳýÁ´½ÓÏ»®Ïß */
  text-decoration: none;
  /* ¼Ì³ÐLIµÄÉ«²Ê£¨È·±£¼¤»î/hoverʱÎÄ×Ö°×É«£© */
  color: inherit;
  /* Èõã»÷ÇøÓò¸²¸ÇÕû¸öLI */
  box-sizing: border-box;
  padding: 0 8px; /* ½ö±£Áô×óÓÒpadding
£¬¸ßµÍÓÉflex¾ÓÖгÅÂú */
}

/* Êó±êhover³ÉЧ - ËùÓзǼ¤»îÏîÐüͣʱ±äÉ« */
.custom-five-col-list__item:not(.custom-five-col-list__item--active):hover {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: #fff !important; /* Ç¿Ôì°×É«
£¬È·±£¸²¸ÇÁ´½Ó¼Ì³Ð */
  border-left-color: #27ae60; /* ·Ö¸ôÏßͬ²½±äÂÌÉ« */
}

/* µ±Ç°Ò³¼¤»î״̬ - ÂÌÉ«½¥±ä²¼¾° + °×É«ÎÄ×Ö */
.custom-five-col-list__item--active {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
  color: #fff !important; /* Ç¿Ôì°×É« */
  border-left-color: #27ae60; /* ·Ö¸ôÏßͬ²½±äÂÌÉ« */

}

/* PADÊÊÅä (768px - 1024px) */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  .custom-five-col-list {
    width: 90%;
  }
  
  .custom-five-col-list__item {
    font-size: 14px;
    padding: 16px 6px; /* ͬ´ëÊ©´ó¸ßµÍpadding
£¬Î¬³Ö¸ß¶È */
    min-height: 56px; /* ÊÊÅäPAD¸ß¶È */
  }
  
  .custom-five-col-list__item a {
    padding: 0 6px; /* ½ö×óÓÒpadding */
  }
}

/* ÊÖ»úÊÊÅä (Ó×ÓÚ768px) */
@media screen and (max-width: 767px) {
  .custom-five-col-list {
    width: 90%;
    /* ¸ÄΪÊúÏò·ÖÁУ¨ÎåÐУ© */
    flex-direction: column;
    /* ÊÖ»ú¶ËÈÝÆ÷±ß¿ò±£Áô */
    border: 1px solid #ddd;
    /* Ö÷Ì⣺ÊÖ»ú¶ËULÓëÉÏ·½DIVµÄ20px¼ä¾à */
    margin-top: 20px;
  }
  
  .custom-five-col-list__item {
    width: 100%;
    font-size: 13px;
    padding: 16px 8px; /* ͬ´ëÊ©´ó¸ßµÍpadding
£¬Î¬³Ö¸ß¶È */
    min-height: 52px; /* ÊÊÅäÊÖ»ú¸ß¶È */
    /* ÊÖ»ú¶Ë¸ÄΪ¸ßµÊ×Ö¸ôÏߣ¨´úÌæ×óÓÒ£© */
    border-left: none;
    border-top: 1px solid #ddd;
    margin-bottom: 0; /* ÒƳýÔ­ÓÐmargin-bottom */
  }
  
  /* µÚÒ»¸öLIÒƳý¶¥²¿ÃŸôÏß */
  .custom-five-col-list__item:first-child {
    border-top: none;
  }
  
  .custom-five-col-list__item a {
    padding: 0 8px; /* ½ö×óÓÒpadding */
  }

  /* ¼¤»î/hoverʱͬ²½Åú¸Ä¶¥²¿ÃŸôÏßÉ«²Ê */
  .custom-five-col-list__item:not(.custom-five-col-list__item--active):hover,
  .custom-five-col-list__item--active {
    border-left-color: transparent;
    border-top-color: #27ae60;
  }
}<!--ºÄʱ1776081768.3182Ãë-->