#starfield { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.main-container { position: relative; padding:0 20px;  max-width: 1200px;  margin: 0 auto; z-index: 10; }
 
.pd60{padding-bottom:60px;}
/*Time Area*/
.home_info { box-sizing: border-box; margin: 90px 0 30px 0; z-index: 999; }
.home_info .h_tip { background: linear-gradient(45deg, var(--linear-gradient-color1), var(--linear-gradient-color2), var(--linear-gradient-color3)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 2s ease infinite; font-size: 50px; text-align: center; height: 60px; line-height: 60px; margin-top: 30px; letter-spacing: 5px; }
    
@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
    
.home_info .h_en { color: var(--linear-gradient-color1); font-size: 15px; opacity: 0.6; letter-spacing: 1px; text-align: center; margin-top: 0px; }
    
@media (min-width: 100px) and (max-width: 768px) {
    .home_info { box-sizing: border-box; margin: 4.5rem 0rem 0rem 0; }
.home_info .h_tip { background: linear-gradient(45deg, var(--linear-gradient-color1), var(--linear-gradient-color2), var(--linear-gradient-color3)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 2s ease infinite; font-size: 50px; text-align: center; height: 60px; line-height: 60px; margin-top: 30px; letter-spacing: 5px; }
.home_info .h_en { color: var(--linear-gradient-color1); font-size: 15px; opacity: 0.6; letter-spacing: 1px; text-align: center; margin-top: 0px; }
 }
@media (min-width: 768px) and (max-width: 1024px) {
    .home_info { box-sizing: border-box; margin-top: 80px; }
.home_info .h_tip { background: linear-gradient(45deg, var(--linear-gradient-color1), var(--linear-gradient-color2), var(--linear-gradient-color3)); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 2s ease infinite; font-size: 50px; text-align: center; height: 60px; line-height: 60px; margin-top: 30px; letter-spacing: 5px; }
.home_info .h_en { color: var(--linear-gradient-color1); font-size: 15px; opacity: 0.6; letter-spacing: 1px; text-align: center; margin-top: 0px; }
 }
/*Search Area*/
.search-wrapper { text-align: center; margin-bottom: 30px; animation: fadeInDown 0.8s ease-out; }
.search-box { position: relative; width: 60%; margin: 0 auto; }
.search-input { width: 100%; padding: 12px 25px; padding-right: 90px; border-radius: 10px; border: 2px solid #999; background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 16px; outline: none; backdrop-filter: blur(5px); transition: all 0.3s; box-sizing: border-box; }
.search-input:focus { background: rgba(255, 255, 255, 0.1); border-color: var(--blue-color); animation: breathe 1.2s infinite alternate ease-in-out; }
.search-actions{ position: absolute; right: 15px;  top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; }
.search-clear { cursor: pointer; color: rgba(255, 255, 255, 0.4); display: none; padding: 5px; }
.search-clear:hover { color: #fff; }
@keyframes breathe {
    /* 0% - 完全无光：阴影距离、模糊度和透明度均为 0 */
    0% {
        box-shadow: 0 0 0px rgba(0, 255, 255, 0),
                    0 0 0px rgba(0, 255, 255, 0),
                    inset 0 0 0px rgba(0, 255, 255, 0);
    }
    
    /* 50% - 光芒最盛：你喜欢的效果 */
    50% {
        box-shadow: 0 0 25px rgba(0, 160, 233, 0.8),
                    0 0 50px rgba(0, 160, 233, 0.4),
                    inset 0 0 15px rgba(0, 160, 233, 0.6);
    }
    
    /* 100% - 回归无光：和 0% 保持完全一致 */
    100% {
        box-shadow: 0 0 0px rgba(0, 160, 233, 0),
                    0 0 0px rgba(0, 160, 233, 0),
                    inset 0 0 0px rgba(0, 160, 233, 0);
    }
}
/*function Area*/
.fun-access-nav { display: flex;  width: 60%; justify-content: center; align-items: flex-start; gap: 2rem; margin: 20px auto; flex-wrap: nowrap; animation: fadeInDown 0.8s ease-out 0.1s both; }
.fun-nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; cursor: pointer; width: 100px; }
.fun-nav-icon-circle { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 10px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);  }
.fun-nav-icon-circle .icon-svg { transition: transform 0.4s ease; }
.fun-nav-text { font-size: 14px; color: var(--text-primary); transition: color 0.3s; text-align: center; font-weight: 500; white-space: nowrap; }
.fun-nav-item:hover .fun-nav-icon-circle { transform: translateY(-8px) scale(1.05); border-color: transparent; color: #000; }
.fun-nav-item:hover .fun-nav-icon-circle .icon-svg { transform: rotate(15deg) scale(1.1); }
.fun-nav-item:hover .fun-nav-text { color: #fff; }
 


/*category Area*/
.category-tab{flex-wrap: nowrap;overflow-x: auto; overflow-y: hidden;display:flex;justify-content:flex-start;}
.category-tab div{height:38px;color:var(--category-tab-text-color); white-space: nowrap; cursor:pointer; line-height:38px;margin-right:8px;border-top-left-radius:8px;border-top-right-radius:8px; padding:0px 18px;background-color:var(--category-tab-text-bgcolor);font-size:14px;}
.category-tab div:hover{background: var(--blue-hover-color); border-color: var(--blue-color);}
.category-tab div.active{background: var(--blue-hover-color); border-color: var(--blue-color);}

.category-section { margin-bottom: 10px; animation: fadeInUp 0.8s ease-out both; }
.category-section:nth-child(2) { animation-delay: 0.1s; }
.category-section:nth-child(3) { animation-delay: 0.2s; }
.category-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.category-name { font-size: 1.25rem;  color: #666; display: flex; align-items: center; gap: 10px; }

.link-grid { display: grid; padding-top:20px; grid-template-columns: repeat(auto-fill, minmax(183px, 1fr)); gap: 10px; transition: max-height 0.4s ease; }
.link-grid.collapsed {}
.link-grid.expanded { max-height: 2000px; }

.link-card { display: flex; align-items: center; padding: 0px 10px; background: var(--link-card-bgcolor); border: 1px solid var(--link-card-border-color); border-radius: 10px; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; height: 60px; box-sizing: border-box; }
.link-card:hover { transform: translateY(-5px);  background: var(--blue-hover-color); border-color: var(--blue-color); }

.link-icon { width: 40px; height: 40px;overflow:hidden;  background: rgba(255, 255, 255, 0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; color: #fff; transition: all 0.3s; flex-shrink: 0; font-weight: bold; }
.link-icon img{width:40px;height:40px;display:block;}
.link-card:hover .link-icon { background: #fff; color: #000; transform: rotate(10deg); }

.card-info { flex: 1; overflow: hidden; }
.card-title { font-size: 15px; font-weight: 600; color: var(--card-title-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-desc { font-size: 12px; color: rgba(255, 255, 255, 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 4px; }
.expand-btn { background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.6); padding: 4px 12px; border-radius: 15px; cursor: pointer; font-size: 12px; transition: all 0.3s; display: inline-flex; align-items: center; gap: 4px; }
.expand-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #4facfe; }
.expand-btn .btn-icon { transition: transform 0.3s; }
.expand-btn.active .btn-icon { transform: rotate(180deg); }

/*job nav*/
.job-nav { position: fixed; align-items:center; bottom: 0px; left: 0px; right:0px; z-index: 2000;height:68px; display: flex; justify-content:center; padding: 0px 20px; box-sizing:border-box; background: color(--yellow-color); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); animation: fadeInUp 1s ease-out 0s both; }
.job-capsule { display: block;cursor:pointer;padding:0 10px; height:30px;line-height:30px; background-color:transparent;  border:1px solid var(--color-unimport); color:var(--color-unimport);margin-left:20px; border-radius: 5px;   text-decoration: none; font-size: 14px;  text-align: center; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); white-space: nowrap; }
.job-capsule:hover { background: var(--yellow-color); color: #000; }
.job-capsule.active { background: var(--yellow-color); color: #000; }
.job-btn { position: relative; font-size: 14px; text-transform: uppercase; text-decoration: none; padding: 0.5rem 0rem; width:8rem; margin-left:1em; display: inline-block; cursor: pointer; border-radius: 6em; transition: all 0.2s; border: none; font-family: inherit; font-weight: 500; color: black; background-color: white; }
.job-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }
.job-btn:active { transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
.job-btn::after { content: ""; display: inline-block; height: 100%; width: 100%; border-radius: 100px; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.4s; }
.job-btn::after {background-color: #fff;}
.job-btn:hover::after {transform: scaleX(1.4) scaleY(1.6);opacity: 0;} 

 
@media (max-width: 768px) {
    
    .search-wrapper {margin-bottom: 20px; }

    .category-name { font-size: 0.9rem;padding-left:0.5rem;color:#fff;}
 
    .link-grid {grid-template-columns: repeat(5, 1fr); gap: 0.5rem;  }
    .link-grid.collapsed { max-height: 70px; }
    .link-card { flex-direction: column; align-items:center; justify-content:center; display:flex; height: auto; padding: 5px 0; }
    .link-icon { width: 30px; height: 30px;overflow:hidden;  background: rgba(255, 255, 255, 0.05); border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-right: 15px; color: #fff; transition: all 0.3s; flex-shrink: 0; font-weight: bold; }
    .link-icon img{width:30px;height:30px;display:block;}
    .card-icon {align-items:center; margin-bottom: 5px;text-align:center;background:#ccc; }
    .card-desc { display: none; }

    .link-icon{margin-right:0px;}
    .card-title { font-size: 12px;margin-top:5px;}
    
    .fun-access-nav { display: flex;  width: 90%; justify-content: center; align-items: flex-start; gap: 2rem; margin: 20px auto; flex-wrap: nowrap; animation: fadeInDown 0.8s ease-out 0.1s both; }
    .fun-nav-item { display: flex;width:2.8rem; flex-direction: column; align-items: center; text-decoration: none; cursor: pointer;   }
    .fun-nav-icon-circle { width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 10px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);  }
    .fun-nav-icon-circle .icon-svg { transition: transform 0.4s ease; }
    .fun-nav-text { font-size: 14px; color:var(--text-primary); transition: color 0.3s; text-align: center; font-weight: 500; white-space: nowrap; }
    .fun-nav-item:hover .fun-nav-icon-circle { transform: translateY(-8px) scale(1.05); border-color: transparent; color: #000; }
    .fun-nav-item:hover .fun-nav-icon-circle .icon-svg { transform: rotate(15deg) scale(1.1); }
    .fun-nav-item:hover .fun-nav-text { color:var(--text-primary); text-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
  
   .search-box { position: relative; width: 90%; margin: 0 auto; }
 
 
    .job-nav { position: fixed;flex-wrap: nowrap;overflow-x: auto; overflow-y:hidden; align-items:center; bottom: 0px; left: 0px; right:0px; z-index: 2000;height:68px; display: flex; justify-content:center; padding: 0px 20px; box-sizing:border-box; background: color(--yellow-color); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.1); animation: fadeInUp 1s ease-out 0s both; }

 
}