* { margin: 0; padding: 0; } .pc-icons { display: flex; gap: 40px; align-items: center; margin-left: auto; margin-right: 60px; } .BASD_head { width: 100%; opacity: 1; position: relative; top: 0; left: 0; z-index: 999; display: flex; box-sizing: border-box; transition: all .5s ease; color: #fff; font-size: 14px; font-weight: bold; background: #ce121f; height: 64px; padding-left: 110px; border-bottom: none; } .BASD_head.homepage-transparent { background: transparent  !important; position: absolute  !important; top: 0  !important; left: 0  !important; right: 0  !important; z-index: 1000  !important; width: 100%  !important; border-bottom: none  !important; } .BASD_head.homepage-transparent .content .item .title { text-shadow: 0 0 10px rgba(0, 0, 0, .5); } .BASD_head.homepage-transparent .content .item .title:hover { color: #fff  !important; text-shadow: 0 0 15px rgba(0, 0, 0, .7); } .BASD_head.homepage-transparent .content .item .title .line { background-color: #fff  !important; box-shadow: 0 0 5px rgba(0, 0, 0, .3); } .BASD_head_inner { width: 100%; display: flex; } .fixed { position: fixed  !important; top: 0  !important; left: 0  !important; right: 0  !important; width: 100%  !important; z-index: 1000  !important; transform: none  !important; box-shadow: 0px 0px 8px 0px rgb(181 181 181 / 50%); } .BASD_head.homepage-transparent.fixed { position: fixed  !important; top: 0  !important; left: 0  !important; right: 0  !important; width: 100%  !important; z-index: 1000  !important; transform: none  !important; } .menu-box { position: relative; display: flex; align-items: center; margin-right: 52px; cursor: pointer; } .menu-box img { width: 205px; height: 34px; } .BASD_head_hold { width: 100%; height: 80px; } .BASD_head .content { height: 100%; display: flex; } .BASD_head .content .item { display: flex; align-items: center; justify-content: center; padding: 0 20px; } .BASD_head .content .item .title { font-size: 20px; font-weight: 400; width: 100%; height: 100%; display: flex; color: #f5918f; justify-content: start; align-items: center; position: relative; transition: all .3s; transform-origin: center bottom; } .BASD_head a { text-decoration: none; transition: all .3s; } .BASD_head .content .item .title:hover { color: #fff; transform: scale(1.06); } .BASD_head .content .item .title:hover .line { transform: translateX(-50%) scaleY(0.943); } .BASD_head .content .item .title .line { width: 100%; height: 0; background-color: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transform-origin: center bottom; margin: 0 auto; } .BASD_head .content .item:hover>.title, .BASD_head .content .item.active>.title { color: #fff; transform: scale(1.06); } .BASD_head .content .item.active>.title .line { height: 3px; transform: translateX(-50%) scaleY(0.943); } .BASD_head .content .item .subset { width: 100%; position: absolute; height: 46px; left: 0; top: 64px; opacity: 0; transition: all .4s; transform: scaleY(0); transform-origin: top; } .BASD_head .content .item:hover .subset { transition: all .4s; opacity: 1; transform: scaleY(1); } .BASD_head .content .item .subset .subset_box { width: 100%; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; height: 46px; padding: 0 40px 0 360px; background-color: rgba(0, 0, 0, .5); } .subset_item { display: flex; flex-wrap: wrap; margin-right: 48px; } .BASD_head .content .item .subset .subset_box .oneLevel { margin-right: 48px; } .BASD_head .content .item .subset .subset_box .oneLevel>.title { font-size: 16px; color: rgba(255, 255, 255, .58); height: 46px; display: flex; align-items: center; position: relative; padding: 0 8px; transform-origin: center bottom; transition: transform .2s ease, color .2s ease; } .BASD_head .content .item .subset .subset_box .oneLevel>.title.isActive, .BASD_head .content .item .subset .subset_box .oneLevel>.title:hover { transform: scale(1.08); color: #fff; } .subset_item .subset_child .child_list { width: 332px; } .BASD_head .content .item .subset .subset_box .subset_item>.name { width: 100%; font-size: 16px; color: #fff; margin: 0; } .BASD_head .content .item .subset .subset_box .subset_item>.name>.title { font-size: 16px; color: #fff; height: 46px; display: flex; align-items: center; position: relative; padding: 0 8px; transform-origin: center bottom; transition: transform .2s ease, color .2s ease; } .BASD_head .content .item .subset .subset_box .subset_item>.name>.title:after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 28px; height: 3px; background: transparent; } .BASD_head .content .item .subset .subset_box .subset_item>.name>.title:hover:after { background: #fff; } .BASD_head .content .item .subset .subset_box .subset_item>.name>.title:hover { transform: scale(1.08); } .BASD_head .language { position: relative; } .BASD_head .language .languageBox { width: 214px; position: absolute; text-align: center; top: 81px; left: 88%; transform: translateX(-50%); display: none; background: rgba(255, 255, 255, .73); box-shadow: 0px 10px 16px 0px rgba(180, 211, 229, 1); border-radius: 8px; padding: 10px 0; } .BASD_head .language:hover .languageBox { display: block; } .BASD_head .language .languageBox .item:hover { color: #5467bb; color: rgba(41, 78, 149, 1); background: rgba(84, 103, 187, .1); } .BASD_head .language .languageBox .item { height: 52px; line-height: 52px; font-size: 22px; color: #9f9f9f; letter-spacing: 0; font-weight: 400; white-space: nowrap; text-align: center; } .BASD_head .content .item .subset .subset_box .subset_item>.name .subset_child { position: absolute; width: 100%; left: 0; top: 80px; background-color: #fff; padding: 20px; box-sizing: border-box; padding-left: 80px; display: none; } .BASD_head .content .item .subset .subset_box .subset_item>.name:hover .subset_child { display: flex; flex-direction: column; } .BASD_head .content .item .subset .isHorizontal>.name:hover .subset_child { display: flex; flex-direction: row  !important; flex-wrap: wrap; } .BASD_head .content .item .subset .subset_box .subset_item>.name .subset_child .child_list { display: flex; flex-direction: column; align-content: flex-start; flex-wrap: wrap; } .BASD_head .content .item .subset .subset_box .subset_item>.name .subset_child a { color: #ededed; font-weight: normal; font-size: 14px; line-height: 3; } .BASD_head .content .item .subset .subset_box .subset_item>.name .subset_child a:hover { color: #fff; } .child_title_box { width: 100%; display: flex; align-items: center; } .child_title { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; color: #fff; } .child_title_btn { margin-left: 5px; cursor: pointer; } .child_list_box { margin-top: 7px; display: none; } .child_list_box_item { margin-right: 50px; display: flex; flex-direction: column; margin-bottom: 25px; } .BASD_head .content .item .subset .subset_box .child_name { margin-top: 7px; font-size: 14px; color: #ededed; } .BASD_head .content .item .subset .subset_box .child_name_title { font-size: 16px; color: #fff; } .BASD_head .content .item .subset .subset_box .subset_item>.name .subset_child .horizontal { width: 1px; height: calc(100% - 50px); position: absolute; background: #fff; opacity: .2; z-index: 3; left: 358px; top: 30px; } .header-right { margin-left: auto; display: flex; align-items: center; } .loginShowBox { display: none; } .homepage-banner { position: relative; width: 100%; height: 533px; overflow: hidden; top: 0; z-index: 1; } .banner-background { position: absolute; top: 34px; left: 0; right: 0; bottom: 0; z-index: 1; } .homepage_banner_zh .banner-background { top: 41px; } .banner-gif { width: 100%; height: 99%; object-fit: cover; object-position: center; } .banner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; z-index: 10; pointer-events: none; } .banner-text-image { width: 100%; height: 100%; filter: drop-shadow(0 0 20px rgba(0, 0, 0, .3)); } .child_title_btn_active { transform: rotate(180deg); } .child_title_active { color: #fff; } .search-box { display: flex; align-items: center; } .languageImg { width: 24px; height: 24px; margin-left: 50px; } .m-icons { display: none; } .m-drawer { display: none; } .BASD_head_en { padding-left: 24px; } .BASD_head_en .pc-icons { margin-right: 24px; } .BASD_head_en .content .item { padding: 0 16px; } .page-title-text { display: none; } @media screen and (min-width: 1920px) and (max-width: 750px) { .BASD_head_en .content .item .title { font-size: 18px; } } @media screen and (max-width: 750px) { .m-nav-item-haschildren.isActive .m-nav-item-sub { display: block; } .m-nav-item-haschildren.isActive .m-nav-link .m-arrow { transform: rotate(45deg); transition: all .5s ease-in-out; } .m-nav-item.m-nav-item-sub { transition: all .5s ease-in-out; padding-left: 2.4rem; border-top: 1px solid #f2f2f2; border-bottom: none; display: none; } .m-nav-item-sub .m-nav-link { border-bottom: 1px solid #f2f2f2; } .m-nav-item-sub .m-nav-link:last-child { border-bottom: none; } .BASD_head_inner { justify-content: space-between; align-items: center; } .page-title-text { display: block; color: #000; position: absolute; left: 50%; transform: translateX(-50%); font-size: 3.2rem; color: #353335; } .menu-box { margin: 0; } .homepage-banner, .pc-icons { display: none  !important; } .BASD_head { min-width: auto; height: 7.6rem; background: #fff; padding-left: 2.3rem; padding-right: 2.2rem; align-items: center; position: fixed  !important; top: 0  !important; left: 0  !important; right: 0  !important; z-index: 999  !important; } .BASD_head.homepage-transparent { position: fixed  !important; top: 0  !important; background: #fff  !important; } .mobile-header-placeholder { display: block  !important; height: 7.6rem; width: 100%; } .menu-box img { width: 9rem; height: 5.8rem; } .BASD_head .content { display: none; } .m-icons { display: flex; align-items: center; height: 7.6rem; position: relative; z-index: 2; } .m-icons-wrapper { padding: 0 2.2rem; height: 100%; display: flex; align-items: center; } .m-nav-item-handle { display: flex; justify-content: space-between; } .m-nav-item-handle .m-icons-wrapper { padding: 2.8rem; } .m-nav-item-handle .m-icon-down, .m-nav-item-handle .m-search { width: 4rem; height: 4rem; } .m-icon-ai, .m-icon-search, .m-icon-menu, .m-icon-close, .m-icon-down, .m-icon-lang { width: 3.6rem; height: 3.6rem; display: inline-block; background-size: contain; background-repeat: no-repeat; cursor: pointer; } .m-icon-search { margin-left: auto; background-image: url("https://pic.cfl-china.cn/cfluat/home/header/icon-search-m.png"); } .m-icon-menu { background-image: url("https://pic.cfl-china.cn/cfluat/home/header/cfl-m-header-menu.png"); } .m-icon-down { background-image: url("https://pic.cfl-china.cn/cfluat/home/header/icon-down-m.png"); } .m-icon-lang { background-image: url("https://pic.cfl-china.cn/cfluat/home/header/icon-chinese-m.png"); } .m-icon-close { text-align: center; font-size: 3.6rem; line-height: 3.6rem; color: #b6c0ce; } .m-drawer { position: fixed; inset: 0; z-index: 1000; display: none; } .m-drawer.show { display: block; } .m-drawer-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .25s; } .m-drawer.show .m-drawer-mask { opacity: 1; } .m-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; background: #fff; transform: translateX(100%); transition: transform .25s; display: flex; flex-direction: column; } .m-drawer.show .m-drawer-panel { transform: translateX(0); } .m-drawer-header { height: 7.6rem; display: flex; align-items: center; justify-content: space-between; padding: 0 2.3rem; gap: 5rem; } .m-drawer-logo img { width: 9rem; height: 5.8rem; } .m-drawer-body { padding: 2.8rem 6.6rem; overflow: auto; -webkit-overflow-scrolling: touch; } .m-nav-item { border-bottom: 1px solid #f2f2f2; } .m-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 2.8rem 0; font-size: 2.8rem; color: #222; text-decoration: none; } .m-nav-link .m-arrow { width: 1.2rem; height: 1.2rem; border-right: .2rem solid #bbb; border-bottom: .2rem solid #bbb; transform: rotate(-45deg); } }