@charset "utf-8";
body{margin: 0;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC) no-repeat center center;background-size: cover;width: 100%;height: 100vh;}
.javaex-panel {border-radius: 4px;box-shadow: rgba(0, 0, 0, 0.18) 0px 2.4px 7.2px, rgba(0, 0, 0, 0.22) 0px 12.8px 28.8px;}
.javaex-panel-box li {display: flex;align-items: center;}
.javaex-panel-box li svg{margin-right: 6px;}
.javaex-file-container .javaex-cover {width: 100px;height: 100px;}
.javaex-file-container .javaex-cover img {margin: 20px auto;}
.javaex-file-container .javaex-cover {border: none; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.navbar{display: flex;justify-content: flex-start;align-items: center;padding: 0 24px;background: linear-gradient(rgba(0, 0, 0, .6), transparent);height: 70px;}
.navbar .logo-wrap{margin-right: 30px;}
.navbar .logo-wrap .top-logo{width: 140px;height: 48px;display: inline-block;background-image: url(https://webimg.javaex.cn/FkF5nh3II-OYNshEg3gSRuU96ykU);vertical-align: middle;background-size: cover;}
.navbar nav{display: flex;flex-grow: 1;height: 70px;line-height: 70px;}
.navbar nav a{color: #ffffff;margin: 0 15px;text-decoration: none;font-size: 18px;}
.navbar nav a:hover{animation:jump .3s}
@keyframes jump{0%{transform:translateY(0)} 50%{transform:translateY(-3px)} to{transform:translateY(0)}}
.right-entry{display: flex; align-items: center; margin-left: 50px;}
.right-entry .right-entry-item{display: block; flex-shrink: 0; margin-right: 4px; min-width: 50px; text-align: center; cursor: pointer; position: relative;}
.right-entry .right-entry-item .right-entry-outside{display: flex; align-items: center; flex-direction: column; flex-shrink: 0; margin-right: 0; text-align: center; font-size: 13px;}
.right-entry .right-entry-item .right-entry-outside .right-entry-icon{margin-bottom: 2px; color: #fff; -webkit-font-smoothing: antialiased;}
.right-entry .right-entry-item .right-entry-outside .right-entry-text{color: #fff;margin-top: 3px;}
.right-entry .right-entry-item .right-entry-outside:hover .right-entry-icon{animation:jump .3s}
.right-menu{display: flex;align-items: center;}
.right-menu span.text{color: #fff;margin-left: 10px;cursor: pointer;}
.right-menu .login-button{background-image: linear-gradient(90deg, #41D1FF 0, #16E05A);color: #222;border: none;padding: 8px 20px;border-radius: 8px;cursor: pointer;font-size: 14px;margin-left: 16px;}
.right-menu .top-username{position: relative; margin-left: 16px; height: 30px; cursor: pointer;display: flex;align-items: center;}
.right-menu .top-username .top-img-wrapper{position: relative; width: 36px; height: 36px; border: 1px solid #16E05A; display: inline-block; border-radius: 50%;}
.right-menu .top-username .avatar{padding: 2px; width: 100%; height: 100%; border-radius: 50%;}
.right-menu .top-username .user-name{display: inline-block; height: 36px;line-height: 36px;max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; vertical-align: top; margin-left: 10px;color: #fff;}
.top-userset-menu{display: none;padding-top: 14px;position: absolute;z-index: 999;text-align: left;border-radius: 12px;right: 0;top:30px;}
.right-menu .top-username:hover .top-userset-menu{display: block;}
.profile-card{background-color: #fff;padding: 20px;padding-bottom: 0;border-radius: 12px;width: 396px;margin: auto;box-shadow: 0 2px 4px 1px rgba(0, 0, 0, .09);}
.profile-card .profile-header{display: flex;align-items: center;}
.profile-card .profile-header .avatar2 {border-radius: 50%;width: 50px;height: 50px;margin-right: 10px;}
.profile-card .profile-header div{flex-grow: 1;}
.profile-card .profile-header .user-name2{color: #18191C;cursor: pointer;font-size: 16px;margin-bottom: 6px;max-width: 240px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.profile-card .profile-header .logout{color: #666;cursor: pointer;font-size: 12px;margin-right: 8px;}
.profile-card .profile-header .logout:hover{color: #18191C;}
.profile-card .vip-status{background: url("https://webimg.javaex.cn/Fo_PnVk9KGtjS0hx0eLDYgplh0rp");display: flex;align-items: center;background-position: 50%;background-repeat: no-repeat;background-size: 100% 100%;border-radius: 8px;cursor: pointer;height: 64px;justify-content: space-between;margin-top: 16px;margin-bottom: 8px;padding: 14px 4px 16px 16px;width: 100%;}
.profile-card .vip-status .vip-text{font-size: 14px;line-height: 18px;color: #333;margin-bottom: 6px;}
.profile-card .vip-status .vip-desc{color: #666;font-size: 12px;}
.profile-card .vip-status img{width: 20px;margin-right: 5px;}
.profile-card .action-button{border: none;align-items: center;box-shadow: 0 1px 4px #00000019;box-sizing: border-box;display: flex;justify-content: center;margin-right: 12px;background-image: linear-gradient(90deg, #a2a7b3, #c3c9d6);border-radius: 18px;font-size: 14px;height: 36px;margin-left: 5px;opacity: .8;width: 96px;z-index: 1;cursor: pointer;}
.profile-card .menu-item{display: flex;align-items: center;cursor: pointer;font-size: 16px;height: 48px;opacity: .75;padding: 0 20px;position: relative;text-align: left;transform: translateX(-20px);width: calc(100% + 40px);}
.profile-card .menu-item:hover{background-color: #f7f7f7;opacity: 1;}
.profile-card .menu-item svg{margin-right: 10px;}
.profile-card .menu-item.ai-count {color: #666;}
.profile-card .menu-item.ai-count:hover {background-color: transparent;opacity: 1;}
.profile-card .card-footer{align-items: center;border-radius: 0 0 12px 12px;bottom: 0;box-shadow: inset 0 1px #ccc;cursor: pointer;display: flex;flex-direction: row-reverse;height: 54px;justify-content: center;margin: 8px 0 0;width: 100%;}
.profile-card .card-footer .ucenter-text{-webkit-background-clip: text;background-clip: text;color: #666;font-size: 14px;height: 14px;line-height: 14px;display: flex;align-items: center;}
.profile-card .card-footer:hover .ucenter-text{color: #222;}
.profile-card .card-footer:hover .ucenter-text svg path{fill: #222;}

.search-container{position: fixed;margin: auto;left: 0;right: 0;box-sizing: border-box;min-height: 40px;max-height: 52px;min-width: 580px;top: 20%;height: 100%;white-space: nowrap;z-index: 3;width: 976px;}
#search-switch{position: absolute;top: -44px;margin-left: 20px;z-index: 2;box-sizing: inherit;}
#search-switch .search-switch-common{position: relative;display: inline-block;line-height: 34px;font-size: 16px;text-align: center;cursor: pointer;padding: 6px 14px;color: #464646;margin-right: 4px;width: 100px;}
#search-switch .search-switch-selected{color: #010101;z-index: 1;}
#search-switch .search-switch-unselected{text-shadow: 0 0 3px white;}
#search-switch .search-switch-common::after{content: '';position: absolute;top: 4px;right: 0;bottom: -1px;left: 0;z-index: -10;background: rgba(255, 255, 255, .7);border-radius: 24px;height: 36px;}
#search-switch .search-switch-selected::after{background: #fff;border-bottom: none;}
.search-container .search-form{width: 100%;background-color: transparent;padding-right: 10px;box-shadow: 0 1px 3px rgba(0, 0, 0, .3);align-items: center;justify-content: flex-end;display: inline-flex;border-radius: 24px;height: 100%;position: relative;background-color: #fff; font-size: 16px;}
.search-container .search-form .search-form_c{flex: 1;}
.search-container .search-form .search-form-query{background-color: transparent;padding: 12px 10px 12px 20px;border: 0;flex: 1;outline: none;-webkit-appearance: none;font-size: 1.125rem;font: inherit;min-width: 200px;color: #000;width: 100%;}
.search-container .search-form .search-icon{position: relative;min-width: 28px;margin: auto 4px;width: 5%;max-height: 26px;height: 100%;cursor: pointer;}
.search-container .search-form svg{height: 100%;width: 100%;}

.notification{display: flex;align-items: center;background-image: linear-gradient(90deg, #E4F7FF 0, #E8FFDD);color: #222;padding: 6px 12px;border-radius: 30px;box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);max-width: 500px;margin: 20px;cursor: pointer;}
.notification .icon{margin-right: 15px;display: flex;}
.notification .text{flex-grow: 1;font-size: 16px;}
.notification .arrow{margin-left: 10px;display: flex;}

.below-container{color: #fff; text-shadow: 2px 2px 4px #000; font-size: .8125rem; display: block; width: 100%;}
.tob-nav-prompt{border-radius: 16px; background: rgba(255, 255, 255, .8); box-shadow: 0 2px 4px 1px rgba(0, 0, 0, .09); backdrop-filter: blur(2px); margin: 20px auto 0; width: 100%; padding: 16px 20px 12px; text-align: center; text-shadow: none; user-select: none; white-space: normal;}
.tob-nav-prompt .tob-head{width: 100%; color: #666; font-size: 16px; margin-bottom: 12px; position: relative; display: flex; align-items: center; text-align: left;}
.tob-nav-prompt .tob-head .s-menu-item{position: relative; display: inline-block; cursor: pointer; margin-right: 24px; line-height: 26px;}
.tob-nav-prompt .tob-head .s-menu-item:hover{color: #222;}
.tob-nav-prompt .tob-head .s-menu-item.current{color: #222; position: relative;}
.tob-nav-prompt .tob-head .s-menu-item.current::after{content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(to right, #41D1FF, #16E05A);}
.tob-nav-prompt .tob-head .tob-head-title{color: #222; font-size: 16px; font-style: normal; font-weight: 700; line-height: 26px;}
.tob-nav-prompt .tob-head .tob-head-title:hover{color: #222; text-decoration: underline;}
.tob-nav-prompt .tob-head .tob-next{position: absolute; right: 0; top: 0; margin: 0; color: #666; padding: 4px 8px 4px 6px; display: flex; align-items: center; border-radius: 100px; opacity: .8; background: #f5f5f5; border: 1px solid #ddd; text-decoration: none;cursor: pointer;}
.tob-nav-prompt .tob-head .tob-next:hover{color: #222;}
.tob-nav-prompt .tob-head .tob-next:hover svg{fill:#222;}
.tob-nav-prompt .tob-head .tob-next > span{display: inline-block; font-size: 14px; line-height: 18px; vertical-align: middle; font-style: normal; font-weight: 400; margin-left: 4px;}
.tob-nav-prompt .tob-hot-pane{font-size: 16px; position: relative;}
.tob-nav-prompt .tob-hot-pane ul{display: flex; flex-wrap: wrap; columns: 3; text-align: left; width: 100%;}
.tob-nav-prompt .tob-hot-pane ul{display: flex; flex-wrap: wrap; columns: 3; text-align: left; width: 100%;}
.tob-nav-prompt .tob-hot-pane ul li{flex: 0 0 32%; padding: 8px 0; display: flex;flex-basis: 33.33%;flex-shrink: 0;overflow: hidden;white-space: nowrap;}
.tob-nav-prompt .tob-hot-pane a{color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.tob-nav-prompt .tob-hot-pane a:hover{text-decoration: underline;}
.tob-nav-prompt .tob-hot-pane a:visited {color: #626675;}
img.WGvaZ6YFU7UA8TKomsp4m{width: 18px;height: 18px;margin-top: 2px;}
._1DHjV0lKKB9gt0NdIKD2iH{display: flex;align-items: end;font-size: 18px;line-height: 18px;margin-right: 8px;}
._2I2OkZqyX2UCie4KDRK7Fy{margin-left: 6px;position: relative;display: inline-block;vertical-align: middle;}
.XazU8VdnI8F36RLVQeQKb{padding: 0 2px;text-align: center;font-style: normal;color: #fff;overflow: hidden;line-height: 16px;height: 16px;font-size: 12px;border-radius: 4px;font-weight: 200;}

.mynav-container{position: fixed; z-index: 10;width: 1200px;margin: auto;bottom: 60px;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.7);padding: 10px 0;border-radius: 24px;}
.mynav{display: flex;flex-wrap: wrap;}
.mynav-icon{position: relative;display: flex;flex-direction: column;align-items: center;color: white;text-decoration: none;margin: 10px;width: 100px;text-align: center;}
.mynav-icon a{width: 100%;}
.mynav-icon p{color: #fff;margin: 5px 0 0 0;font-size: 14px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100%;}
.mynav .image{align-items: center;justify-content: center;display: flex;width: 64px;height: 64px;border-radius: 20px;}
.mynav .new-add-image{background-color: #fff;}
.mynav .mynav-icon img{width: 64px;height: 64px;border-radius: 20px; background-color: #fff;}
.mynav-icon:hover .end{opacity: 1;}
.mynav-icon .end{position: absolute;top: 0;right: -6px;background-color: rgba(255, 255, 255, 0.2);cursor: pointer;width: 18px;height: 18px;padding: 1px;border-radius: 2px;opacity: 0;}
.mynav-icon .end svg{fill: #fff;}

.add-site-modal{background: white;padding: 20px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);border-radius: 5px;width: 320px;position: absolute;z-index: 100;}
.add-site-modal .modal-header, .add-site-modal .modal-footer{display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.add-site-modal .modal-header h2{font-weight: 600;font-size: 16px;line-height: 24px;margin-top: 0px;margin-bottom: 0px;color: #222;}
.add-site-modal .close-button{cursor: pointer;border: none;background: #f7f7f7;border-radius: 2px;font-size: 14px;line-height: 20px;min-width: 24px;height: 24px;}
.add-site-modal .modal-footer button{flex: 1;height: 32px;line-height: 32px;color: #222;border: none;border-radius: 2px;background-color: #eaeaea;cursor: pointer;margin-right: 5px;}
.add-site-modal .modal-footer button:last-child{margin-right: 0;}
.add-site-modal .modal-footer button:hover{background-color: #d0d0d0;}
.add-site-modal .modal-content{margin-bottom: 10px;}
.add-site-modal .modal-content label{display: block;margin-bottom: 8px;}
.add-site-modal .modal-content input{width: 100%;padding: 5px;margin-bottom: 16px;border: 1px solid #b6b6b6;border-radius: 2px;height: 32px;line-height: 32px;color: #222;background: #f7f7f7;}
.add-site-modal .modal-content input:focus{border:1px solid #222;}
.add-site-modal .suggestion{margin-top: 20px;}

.bottom-layer{position: fixed; z-index: 302; bottom: 0; left: 0; height: 39px; padding-top: 1px; zoom: 1; margin: 0; line-height: 39px; background: rgba(255, 255, 255, .8);visibility: visible;width: 100%;}
.bottom-layer .bottom-layer-content{margin: 0 17px; text-align: center;}
.bottom-layer .lh{display: inline-block; margin-right: 14px;}
.bottom-layer .text-color{color: #666;}
.bottom-layer a{text-decoration: none;}
.bottom-layer a:hover{color: #222;}