#wide-menu { display: none; position: absolute; background: #f5f5f5; top: 90px; right: 0; bottom: 0; left: 0; border-top: 2px solid #e60012; z-index: 3000 } #wide-menu.expanded { display: block } #wide-menu ul { margin: 0; padding: 0; list-style: none } #wide-menu .ns-menu-mb { display: none !important } #wide-menu ul.firstClass { position: absolute; top: 0; bottom: 0; width: 20vw; padding: 20px 0 20px 4vw; background: #f5f5f5; border-right: 1px solid #dcdcdc; box-sizing: content-box; z-index: 3100 } #wide-menu ul.firstClass>li { display: flex; justify-content: space-between; align-items: center; padding: 5px 20px 5px 10px; font-size: 16px; color: #000 } #wide-menu ul.firstClass>li.ns-no-children:after { display: none } #wide-menu ul.firstClass>li:after { content: ""; width: 11px; height: 11px; background: url(/cn/tres/NewWebUI/2020/images/menu/menu-external.png) no-repeat; background-size: cover } #wide-menu ul.firstClass>li.ns-mb-login.admin-user .ns-user-text { display: flex } #wide-menu ul.firstClass>li.ns-mb-login.admin-user a.ns-mb-admin { display: none } #wide-menu ul.firstClass>li.ns-mb-login.admin-user a.ns-mb-layout { display: flex } #wide-menu ul.firstClass>li.ns-mb-login .ns-user-text { display: none; align-items: center; padding-bottom: 10px } #wide-menu ul.firstClass>li.ns-mb-login .ns-user-text p { padding-left: 5px; font-size: 14px } #wide-menu ul.firstClass>li.ns-mb-login .ns-user-text p span { color: red; padding-left: 5px } #wide-menu ul.firstClass>li.ns-mb-login a { display: block; background: #e60012; color: #fff !important; padding: 10px 0; display: flex; justify-content: center; align-items: center; line-height: 1; margin-bottom: 10px } #wide-menu ul.firstClass>li.ns-mb-login a .icon { margin-right: 10px } #wide-menu ul.firstClass>li.ns-mb-login a.ns-mb-layout { display: none } #wide-menu ul.firstClass>li.ns-mb-login::after { display: none } #wide-menu ul.firstClass>li.ns-mb-language-region { position: absolute; bottom: 0; left: 0; width: 100% } #wide-menu ul.firstClass>li.ns-mb-language-region.open-active { top: 0; right: 0; background: #f5f5f5; padding-top: 30px } #wide-menu ul.firstClass>li.ns-mb-language-region.open-active h2 { position: absolute; bottom: 5px; right: 15px } #wide-menu ul.firstClass>li.ns-mb-language-region.open-active h2::after { transform: translateY(-50%) rotate(0) } #wide-menu ul.firstClass>li.ns-mb-language-region.open-active>ul { display: block } #wide-menu ul.firstClass>li.ns-mb-language-region>ul { display: none } #wide-menu ul.firstClass>li.ns-mb-language-region>ul li { padding: 5px 0; font-size: 14px } #wide-menu ul.firstClass>li.ns-mb-language-region h2 { display: flex; justify-content: flex-end; font-size: 14px; align-items: center; padding: 10px 25px 10px 0; position: relative } #wide-menu ul.firstClass>li.ns-mb-language-region h2 .icon { padding-right: 5px } #wide-menu ul.firstClass>li.ns-mb-language-region h2::after { content: ""; background: url(/cn/tres/NewWebUI/2020/images/arrow-second-menu.png) no-repeat; background-size: cover; width: 13px; height: 7px; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(180deg) } #wide-menu ul.firstClass>li.separate { padding: 15px 20px 15px 10px; position: relative } #wide-menu ul.firstClass>li.separate:before { content: ''; position: absolute; left: 10px; right: 20px; height: 1px; font-size: 0; background: #e0e0e0 } #wide-menu ul.firstClass>li.separate:after { display: none } #wide-menu ul.firstClass>li.active ul.secondClass { display: block } #wide-menu ul.firstClass>li.hasChild:after { content: ""; width: 6px; height: 10px; background: url(/cn/tres/NewWebUI/2020/images/menu/menu-arrow.png) no-repeat; background-size: cover } #wide-menu ul.firstClass>li.hasChild.active:after, #wide-menu ul.firstClass>li.hasChild:hover:after { background-position: -6px 0 } #wide-menu ul.firstClass>li.hasChild.active>label, #wide-menu ul.firstClass>li.hasChild:hover>label { color: #e60012; border-bottom: 2px solid #e60012 } #wide-menu ul.firstClass>li.hasChild>label { position: relative; display: inline-block; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 400 } #wide-menu ul.firstClass>li a { color: #000 !important; text-decoration: none } #wide-menu ul.firstClass>li:hover>a { color: #e60012 !important; text-decoration: underline !important } #wide-menu ul.firstClass>li:hover:after { background-position: -11px 0 } #wide-menu ul.secondClass { display: none; position: absolute; left: 25vw; top: 0; bottom: 0; width: 15vw; padding: 20px 0 20px 2vw; background: #f5f5f5; border-right: 1px solid #dcdcdc; z-index: 3200 } #wide-menu ul.secondClass h3 { margin: 1em 0 } #wide-menu ul.secondClass>span { display: none } #wide-menu ul.secondClass>li { display: flex; justify-content: space-between; align-items: center; padding: 8px 25px 8px 10px; font-size: 16px; color: #000; cursor: pointer } #wide-menu ul.secondClass>li.ns-no-children:after { display: none } #wide-menu ul.secondClass>li.ns-no-children label { color: #000; cursor: auto } #wide-menu ul.secondClass>li.ns-no-children.active>label, #wide-menu ul.secondClass>li.ns-no-children:hover>label { border-color: transparent } #wide-menu ul.secondClass>li label { position: relative; display: inline-block; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 400 } #wide-menu ul.secondClass>li label:after { content: ''; position: absolute; right: -10px; top: 5px; z-index: 1 } #wide-menu ul.secondClass>li:after { content: ''; width: 6px; height: 10px; background: url(/cn/tres/NewWebUI/2020/images/menu/menu-arrow.png) no-repeat; background-size: cover } #wide-menu ul.secondClass>li.active, #wide-menu ul.secondClass>li:hover { color: #e60012 } #wide-menu ul.secondClass>li.active:after, #wide-menu ul.secondClass>li:hover:after { background-position: -6px 0 } #wide-menu ul.secondClass>li.active>label, #wide-menu ul.secondClass>li:hover>label { border-bottom: 2px solid #e60012 } #wide-menu ul.secondClass>li.viewAll { margin-top: 30px } #wide-menu ul.secondClass>li.viewAll:after { width: 12px; height: 10px; background: url(/cn/tres/NewWebUI/2020/images/menu/menu-arrow-all.png) no-repeat; background-size: cover } #wide-menu ul.secondClass>li.viewAll:hover:after { background-position: -12px 0 } #wide-menu ul.secondClass>li.viewAll:hover a { color: #e60012 !important } #wide-menu ul.secondClass>li.viewAll label a:hover { text-decoration: none !important } #wide-menu ul.secondClass>li>.wide-menu-item-content { display: none } #wide-menu .wide-menu-content { position: absolute; left: 40vw; right: 0; top: 0; bottom: 0; padding: 20px 8vw 20px 50px; background: #fff; z-index: 3300 } #wide-menu .wide-menu-content.wide { left: 24.1vw } #wide-menu .wide-menu-content>span { display: none } #wide-menu .wide-menu-content h2 { display: flex; margin-top: 0; margin-bottom: 20px; padding: 8px 0; font-size: 16px; font-weight: 700 } #wide-menu .wide-menu-content h2 a { position: relative; display: inline-block; padding-right: 24px; font-size: 16px; font-weight: 700; text-decoration: none; overflow: hidden; color: #000 } #wide-menu .wide-menu-content h2 a:after { content: ''; position: absolute; width: 12px; height: 10px; right: 5px; top: 50%; background: url(/cn/tres/NewWebUI/2020/images/menu/menu-arrow-all.png) -12px 0 no-repeat; transform: translateY(-50%); transition: right .3s } #wide-menu .wide-menu-content h2 a:hover { color: #e60012 } #wide-menu .wide-menu-content h2 a:hover:after { right: 0 } #wide-menu .wide-menu-content h3 { margin-top: 0; margin-bottom: 16px; font-size: 14px; font-weight: 700 } #wide-menu .wide-menu-content h4 { color: #727171; padding-bottom: 10px; font-weight: 700 } #wide-menu .wide-menu-content .wide-menu-expend { display: flex; justify-content: space-between } #wide-menu .wide-menu-content .wide-menu-expend>div { width: 24vw; padding-right: 40px } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-left ul { margin-right: 50px } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-right { padding: 0 40px } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross { width: auto } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross dl { margin-top: 0 } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross .wide-menu-content-cross-items { display: flex; margin: 0 -15px } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross .wide-menu-content-cross-items>dl { padding: 0 15px } #wide-menu .wide-menu-content .wide-menu-expend hr { margin: 23px 50px 23px 0; border: 0; height: 1px; background: #e5e5e5 } #wide-menu .wide-menu-content .wide-menu-expend ul+h4 { margin-top: 30px } #wide-menu .wide-menu-content .wide-menu-expend ul li { margin-bottom: 10px } #wide-menu .wide-menu-content .wide-menu-expend ul li a { font-size: 14px; color: #727171; text-decoration: none } #wide-menu .wide-menu-content .wide-menu-expend ul li a:hover { color: #e60012 !important; text-decoration: underline !important } #wide-menu .wide-menu-content .wide-menu-expend ul.hot li { position: relative; margin-bottom: 5px; padding-left: 15px } #wide-menu .wide-menu-content .wide-menu-expend ul.hot li:before { position: absolute; content: ''; left: 0; top: 6px; width: 6px; height: 10px; background: url(/cn/tres/NewWebUI/2020/images/menu/menu-arrow.png) 0 0 no-repeat; background-size: cover } #wide-menu .wide-menu-content .wide-menu-expend ul.two-column { display: flex; flex-wrap: wrap } #wide-menu .wide-menu-content .wide-menu-expend ul.two-column li { width: 50% } #wide-menu .wide-menu-content .wide-menu-expend dl { margin-top: 15px } #wide-menu .wide-menu-content .wide-menu-expend dl:first-child { margin-top: 0 } #wide-menu .wide-menu-content .wide-menu-expend dl dt { position: relative; overflow: hidden } #wide-menu .wide-menu-content .wide-menu-expend dl dt img { width: 100%; max-width: 100%; transition: all .3s } #wide-menu .wide-menu-content .wide-menu-expend dl dt label { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(62, 58, 57, .4); padding: 10px 15px; margin: 0; font-size: 14px; color: #fff; transition: all .3s } #wide-menu .wide-menu-content .wide-menu-expend dl dt:hover img { transform: scale(1.1) } #wide-menu .wide-menu-content .wide-menu-expend dl dt:hover label { padding-left: 20px; background: #3e3a39 } #wide-menu .wide-menu-content .wide-menu-expend dl dd { padding: 18px 0; font-size: 14px; color: #000; line-height: 1.5 } .ns-search-layer { position: fixed; top: 90px; left: 0; width: 100%; box-shadow: 0 0 10px #ccc; background: #fff; border-top: 2px solid #e60012; padding: 40px 0; z-index: 3000; display: none } .ns-search-layer .ns-search-box { max-width: 1000px; margin: 0 auto; position: relative; padding-right: 160px; font-size: 16px } .ns-search-layer .ns-search-box .ns-search-keyword { margin-right: 160px; width: 100% } .ns-search-layer .ns-search-box .ns-search-keyword::before { content: ""; background: url(/cn/tres/NewWebUI/2020/images/icon-search-layer.png) no-repeat; background-size: 29px 29px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 29px; height: 29px } .ns-search-layer .ns-search-box .ns-search-keyword input { width: 100%; border-right: transparent; border: 0; outline: 0; height: 60px; line-height: 60px; padding: 0 20px 0 70px; border: 1px solid #000; border-right: 0 } .ns-search-layer .ns-search-box .ns-search-submit { border: 0; outline: 0; width: 160px; color: #fff; background: #e60012; height: 60px; line-height: 60px; position: absolute; top: 0; right: 0 } @media (max-width:1200px) { .ns-search-layer { padding: 30px 0 } .ns-search-layer .ns-search-box { max-width: none; margin: 0 30px; padding-right: 140px; font-size: 14px } .ns-search-layer .ns-search-box .ns-search-keyword input { height: 50px; line-height: 50px } .ns-search-layer .ns-search-box .ns-search-submit { width: 140px; height: 50px; line-height: 50px } } @media (max-width:992px) { #wide-menu { top: 44px; overflow: hidden } #wide-menu .ns-menu-mb { display: block !important } #wide-menu ul.firstClass { width: auto; right: 0; left: 0; padding-left: 0 } #wide-menu ul.firstClass>li { padding-left: 20px } #wide-menu ul.firstClass>li.active { background: #999 } #wide-menu ul.firstClass>li.active ul.secondClass { left: 0 } #wide-menu ul.secondClass { display: block; left: 100%; width: 100%; transition: .3s; z-index: 99 } #wide-menu ul.secondClass>li.active { background: 0 0; color: #000 } #wide-menu ul.secondClass>li.active>label:after { background-position: 0 0 } #wide-menu ul.secondClass>span { display: block; padding: 10px } #wide-menu .wide-menu-content { display: block; position: absolute; left: 100%; width: 100%; padding: 20px; background: #eee; overflow-y: scroll; transition: .3s } #wide-menu .wide-menu-content.wide { left: 0 } #wide-menu .wide-menu-content.active { left: 0 } #wide-menu .wide-menu-content>span { display: block; padding: 10px } #wide-menu .wide-menu-content .wide-menu-expend { flex-direction: column } #wide-menu .wide-menu-content .wide-menu-expend>div { width: auto } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-right { padding: 20px } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross { width: auto } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross dl { margin-top: 0 } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross .wide-menu-content-cross-items { display: flex; flex-direction: column; margin: 0 -15px } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross .wide-menu-content-cross-items>dl { margin-top: 15px; padding: 0 15px } #wide-menu .wide-menu-content .wide-menu-expend .wide-menu-content-cross .wide-menu-content-cross-items>dl:first-child { margin-top: 0 } }