@charset "utf-8"; #topnav[data-fixed="fixed"] { position: fixed; top: 0; left: 0; right: 0; display: block; margin: 0; z-index: 999; } .nav-container * { box-sizing: border-box; font-family: helvetica neue, helvetica, arial, sans-serif, microsoft yahei, serif !important; } .nav-container a { cursor: pointer; color: #333; text-decoration: none; } .nav-container img { vertical-align: middle; border: 0; } .nav-container .imgs-object-fit { width: 100%; height: 100%; object-fit: cover; font-family: "object-fit: cover"; } .nav-container .nav-icon { display: inline-block; width: 26px; height: 10px; background-size: cover; background-repeat: no-repeat; margin-left: 8px; } .nav-container .icon-huiyuan-vip { display: inline-block; width: 25px; height: 20px; background: no-repeat; vertical-align: text-bottom; background-size: cover; margin-right: 5px; } .nav-container { position: relative; width: 100%; min-width: 1200px; height: 72px; z-index: 999; background: #fff; box-shadow: rgba(51, 51, 102, 0.2) 2px 2px 9px -2px; } .nav-content { display: flex; justify-content: space-between; } .nav-content .nav-left { display: flex; align-items: center; overflow: hidden; } .nav-content .nav-right { display: flex; align-items: center; } .nav-logo { display: inline-block; line-height: 72px; } .nav-menu { display: flex; align-items: center; } .nav-menu i.arrow-down { display: inline-block; vertical-align: middle; width: 10px; height: 6px; background: no-repeat; background-size: cover; transition: all 0.2s ease 0s; margin-left: 4px; } .nav-menu .menu-item { position: relative; display: block; line-height: 72px; font-size: 14px; font-weight: 400; color: #0c0f11; white-space: nowrap; } .nav-menu .menu-item.active-hover:hover { color: #ff7400; } .nav-menu .menu-item.active-down { color: #ff7400; } .nav-menu .menu-item.active-down i.arrow-down { background-image: ; transform: rotate(-180deg); } .nav-menu .menu-item.active { color: #ff7400; } .nav-menu .menu-item.active i.arrow-down { background-image: ; } .nav-menu .menu-item.active::after { opacity: 1; } .nav-menu .menu-item::after { content: ""; position: absolute; left: 50%; bottom: 16px; width: 28px; height: 4px; background: linear-gradient(143deg, #ffac00 0%, #ff8a00 62%, #ff7400 100%); border-radius: 2px; opacity: 0; } .nav-menu .nav-menu-list:first-child .menu-item::after { margin-left: -14px; } .nav-language { line-height: 72px; } .nav-language .dropdown-link { display: inline-block; cursor: pointer; } .nav-language .el-icon-arrow-down { transform: rotate(0); transition: transform 0.25s linear; } .nav-language:hover .dropdown-link, .nav-language.active .dropdown-link { color: #ff7400; } .nav-language:hover .el-icon-arrow-down, .nav-language.active .el-icon-arrow-down { transform: rotate(180deg); } .nav-user { display: flex; align-items: center; line-height: 72px; } .nav-user .nav-login { display: inline-block; font-size: 14px; font-weight: 400; color: #0c0f11; } .nav-user .nav-login:hover { color: #ff7400; } .nav-user .nav-register { display: inline-block; color: #fff; background-color: #ff7400; } .nav-user .nav-register:hover { background-color: #ff9129; } .nav-huiyuan-vip { line-height: 72px; } .nav-huiyuan-vip:hover { color: #ff7400; } .nav-user-success { display: flex; align-items: center; height: 100%; } .user-message { position: relative; line-height: 72px; } .user-message .el-icon-bell { position: relative; top: 2px; font-size: 20px; } .user-message .message-number { position: absolute; top: 12px; left: 14px; height: 16px; line-height: 16px; font-size: 12px; font-weight: 400; color: #fff; background: #ff7400; border-radius: 10px; padding: 0 4px; text-align: center; white-space: nowrap; } .user-message:hover { color: #ff7400; } .user-portrait { line-height: 72px; } .user-portrait .dropdown-portrait { display: inline-block; cursor: pointer; } .user-portrait .dropdown-portrait img.imgs-object-fit { width: 36px; height: 36px; border-radius: 36px; overflow: hidden; } .user-infor { display: flex; align-items: center; padding: 0 14px 0 24px; margin-bottom: 12px; } .user-infor img { width: 100%; height: 100%; object-fit: cover; } .user-infor .infor-portrait { flex: none; width: 36px; height: 36px; border-radius: 36px; overflow: hidden; } .user-infor .infor-name { padding-left: 8px; overflow: hidden; } .user-infor .infor-name h4 { font-size: 14px; font-weight: bold; color: #0c0f11; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .user-infor .infor-name p { font-size: 12px; font-weight: 400; color: #898c8e; line-height: 16px; margin-top: 2px; } .user-infor:hover .infor-name h4 { color: #ff7400; } .orange-topbar-dropdown { position: absolute; top: 72px; left: 0; width: 100%; height: 0; opacity: 0; overflow: hidden; background: #fff; color: #332333; transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 999; box-shadow: 0px 4px 6px 0px rgba(200, 201, 204, 0.5); } .orange-topbar-dropdown.expand { height: 100%; opacity: 1; } .orange-topbar-dropdown .orange-topbar-dropdown_shadow { display: flex; border-top: 1px solid rgba(61, 61, 61, 0.15); box-shadow: 0px 2px 3px 0px rgba(200, 201, 204, 0.2) inset; } .orange-topbar-dropdown .menu-sub-brief { flex: none; background: #f5f7f9; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title { font-size: 20px; font-weight: 500; color: #0c0f11; line-height: 28px; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title span { vertical-align: middle; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title .el-icon-arrow-right { font-size: 12px; transition: all 0.3s; font-weight: bold; margin-left: 6px; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title:hover { color: #ff7400; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title:hover .el-icon-arrow-right { transform: translatex(6px); color: #ff7400; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title:hover span { color: #ff7400; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title.active-default { cursor: default; color: #0c0f11; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title.active-default:hover { color: #0c0f11; } .orange-topbar-dropdown .menu-sub-brief a.sub-brief-title.active-default:hover span { color: #0c0f11; } .orange-topbar-dropdown .menu-sub-brief p { font-size: 14px; font-weight: 400; color: #898c8e; line-height: 24px; margin-top: 16px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 6; -webkit-box-orient: vertical; text-overflow: ellipsis; } .orange-topbar-dropdown .menu-sub-list { flex: auto; display: flex; flex-wrap: wrap; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item { display: block; margin-bottom: 4px; overflow: hidden; color: #0c0f11; font-size: 16px; font-weight: 600; line-height: 24px; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item span { vertical-align: middle; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item .el-icon-arrow-right { font-size: 12px; transition: all 0.3s; font-weight: bold; margin-left: 6px; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item:hover { color: #ff7400; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item:hover .el-icon-arrow-right { transform: translatex(6px); color: #ff7400; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item:hover span { color: #ff7400; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item.active { color: #ff7400; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item.active .el-icon-arrow-right { color: #ff7400; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item.active span { color: #ff7400; } .orange-topbar-dropdown .menu-sub-list .menu-sub-item.active-default { cursor: default; } .orange-topbar-dropdown .menu-three-list .menu-three-item { position: relative; display: inline-block; margin-top: 12px; padding-left: 2px; color: #0c0f11; font-size: 14px; font-weight: 400; line-height: 22px; } .orange-topbar-dropdown .menu-three-list .menu-three-item .three-item-pic { width: 120px; height: 120px; margin-bottom: 8px; overflow: hidden; } .orange-topbar-dropdown .menu-three-list .menu-three-item:hover { color: #ff7400; } .orange-topbar-dropdown .menu-three-list .menu-three-item:hover span { color: #ff7400; } .orange-topbar-dropdown .menu-three-list .menu-three-item.active { text-align: center; margin-left: -2px; padding-left: 0; } .orange-topbar-dropdown .menu-three-list .menu-three-item.active-default { cursor: default; } .orange-topbar-dropdown .menu-three-list .menu-three-item.active-default:hover { color: #0c0f11; } .orange-topbar-dropdown .menu-three-list .menu-three-item.active-default:hover span { color: #0c0f11; } .cds-advertising-box { line-height: 0px; } .cds-advertising { display: inline-block; overflow: hidden; } .cds-advertising a { width: 100%; display: inline-block; color: #333; height: 100%; } .cds-advertising img { width: 100%; height: 100%; object-fit: cover; } .cds-advertising a.nourl { cursor: default; } /* 响应式 */ .nav-menu .menu-item { padding: 0 16px; } .nav-menu .menu-item::after { margin-left: -16px; } .nav-language { padding-left: 24px; } .nav-user .nav-login { margin: 0 24px; } .nav-user .nav-register { padding: 0 32px; } .nav-huiyuan-vip { padding-left: 24px; } .user-message { margin: 0 38px; } .nav-user-success { padding-right: 40px; } .orange-topbar-dropdown .menu-sub-brief { width: 460px; padding: 40px 80px; } .orange-topbar-dropdown .menu-sub-list { padding: 0 80px 40px; } .orange-topbar-dropdown .menu-sub-list .sub-list-content { width: 20%; margin-top: 40px; } .orange-topbar-dropdown .menu-sub-list .sub-list-content.active { margin-top: 74px; } .el-dropdown-menu.nav-dropdown-menu { border: none; background: rgba(255, 255, 255, 0.96); box-shadow: 0px 0px 4px 0px rgba(10, 42, 97, 0.2); margin-top: 0 !important; } .el-dropdown-menu.nav-dropdown-menu .el-dropdown-menu__item a.menu-item { display: block; } .el-dropdown-menu.nav-dropdown-menu .el-dropdown-menu__item:hover, .el-dropdown-menu.nav-dropdown-menu .el-dropdown-menu__item.active { background-color: #fff; } .el-dropdown-menu.nav-dropdown-menu .el-dropdown-menu__item:hover a.menu-item, .el-dropdown-menu.nav-dropdown-menu .el-dropdown-menu__item.active a.menu-item { color: #ff7400; } .el-dropdown-menu.nav-dropdown-menu .popper__arrow { display: none; } .el-dropdown-menu.language-dropdown-menu { width: 110px; } .el-dropdown-menu.language-dropdown-menu .el-dropdown-menu__item { padding: 0 14px; text-align: center; } .el-dropdown-menu.portrait-dropdown-menu { width: 180px; } .el-dropdown-menu.portrait-dropdown-menu .el-dropdown-menu__item { padding: 0 8px; } .el-dropdown-menu.portrait-dropdown-menu .el-dropdown-menu__item a.menu-item { padding-left: 16px; } .el-dropdown-menu.portrait-dropdown-menu .el-dropdown-menu__item:hover a.menu-item { color: #332333; background-color: #f5f7f9; } @media screen and (max-width: 1880px) and (min-width: 1781px) { .nav-content .nav-left { max-width: 62%; } } @media screen and (max-width: 1780px) and (min-width: 1680px) { .nav-content .nav-left { max-width: 60%; } .nav-menu .menu-item { padding: 0 14px; } } @media screen and (max-width: 1679px) and (min-width: 1580px) { .nav-content .nav-left { max-width: 60%; } .nav-menu .menu-item { padding: 0 12px; } .nav-user .nav-login { margin: 0 12px; } .nav-user .nav-register { padding: 0 16px; } .nav-huiyuan-vip { padding-left: 10px; } .nav-user-success { padding-right: 30px; } } @media screen and (max-width: 1579px) and (min-width: 1440px) { .nav-content .nav-left { max-width: 58%; } .nav-menu .menu-item { padding: 0 12px; } .nav-user .nav-login { margin: 0 12px; } .nav-user .nav-register { padding: 0 16px; } .nav-huiyuan-vip { padding-left: 10px; } .nav-user-success { padding-right: 30px; } } @media screen and (max-width: 1439px) and (min-width: 1280px) { .nav-content .nav-left { max-width: 68%; } .nav-menu .menu-item { padding: 0 10px; } .nav-user .nav-login { margin: 0 8px; } .nav-user .nav-register { padding: 0 8px; } .nav-huiyuan-vip { padding-left: 10px; } .user-message { margin: 0 28px; } .nav-user-success { padding-right: 20px; } .orange-topbar-dropdown .menu-sub-brief { width: 350px; padding: 40px 20px; } .orange-topbar-dropdown .menu-sub-list { padding: 0 40px 40px; } .orange-topbar-dropdown .menu-sub-list .sub-list-content.active { margin-top: 40px; } } @media screen and (max-width: 1279px) and (min-width: 1200px) { .nav-content .nav-left { max-width: 68%; } .nav-menu .menu-item { padding: 0 9px; } .nav-user .nav-login { margin: 0 8px; } .nav-user .nav-register { padding: 0 8px; } .nav-huiyuan-vip { padding-left: 10px; } .user-message { margin: 0 18px; } .nav-user-success { padding-right: 10px; } .orange-topbar-dropdown .menu-sub-brief { width: 320px; padding: 40px 20px; } .orange-topbar-dropdown .menu-sub-list { padding: 0 40px 40px; } .orange-topbar-dropdown .menu-sub-list .sub-list-content.active { margin-top: 40px; } } @media screen and (max-width: 1199px) { .nav-content .nav-left { max-width: 68%; } .nav-menu .menu-item { padding: 0 8px; } .nav-user .nav-login { margin: 0 8px; } .nav-user .nav-register { padding: 0 8px; } .nav-huiyuan-vip { padding-left: 8px; } .user-message { margin: 0 18px; } .nav-user-success { padding-right: 10px; } .orange-topbar-dropdown .menu-sub-brief { width: 310px; padding: 40px 20px; } .orange-topbar-dropdown .menu-sub-list { padding: 0 40px 40px; } .orange-topbar-dropdown .menu-sub-list .sub-list-content.active { margin-top: 40px; } }