/*£º 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;
  }
}<!--ºÄʱ1776162611.5163Ãë-->