.c_portalResProduct_category-01001 .categrayBox .iconfont1 { display: none; } .cateTitle { text-align: center; font-size: 36px; font-weight: 700; line-height: 54px; color: #55b5a5; margin-top: 40px; margin-bottom: 20px; display: none; } .cateTitle p { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; height: auto; line-height: 21px; color: #595959; font-weight: normal; } @media only screen and (max-width: 768px) { .cateTitle { display: none; } } /* 标题 End */ @media only screen and (min-width: 769px) { .categrayBox .contentBox .content { text-align: center; background: #f5f5f5; } .ejTitle { padding-left: 0px !important; line-height: 40px; } .categrayBox .contentBox .content > li:hover .ejBox { display: block; position: absolute; left: 0; min-width: 100%; text-align: left; text-align-last: left; } .categrayBox .contentBox .content > li { display: inline-block; position: relative; } .yjTitle { padding: 0px 40px; line-height: 56px; } .categrayBox .contentBox .content .iconfont { display: none; } } .moveBtn { display: none; color: #46aa2e ; line-height: 40px; width: 100%; text-align: left; white-space: nowrap; padding: 0px 15px; background: rgba(255,255,255,0.9); } .contentBox { width: 100%; height: auto; overflow: visible; background-color: rgba(255,255,255,0.9); z-index: 999999; font-size: 0; } .link { position: relative; height: auto; } .yjTitle { text-align: center; border-bottom: 1px solid #fff; letter-spacing: 1px; } .yjLink { position: relative; display: inline-block; color: #666; font-size: 16px; transition: all .5s ease; } .iconfont1 { position: absolute; right: 45px; top: 0px; bottom: 0px; width: 50px; color: #46aa2e; display: flex; align-items: center; justify-content: center; font-size: 16px; } .ejLi { position: relative; } .ejTitle { position: relative; background-color: #46aa2e; border-bottom: 1px solid #e8e8e8; padding-left: 50px; transition: all .5s ease; } .ejLink { color: #fff; font-size: 14px; display: block; padding: 0px 15px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; } .iconfont2 { position: absolute; right: 20px; top: 0px; bottom: 0px; margin: auto; display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; color: #46aa2e; font-size: 16px; transition: all .5s ease; } .icf { transform: rotate(180deg); } .sjTitle { position: relative; background-color: #fff; border-bottom: 1px solid #e8e8e8; } .sjLink { color: #46aa2e; font-size: 16px; } .ejBox { display: none; } .rotate { transform: rotate(-90deg); } .ejTitle:hover .ejLink { color: #fff; } .ejTitle:hover { background-color: #46aa2e; } .backBtn { display: none; } .yjTitle:hover { background: #46aa2e; } .yjTitle:hover .yjLink { color: #fff; } .sjBox { display: none; } .line_right { display: none; } @media only screen and (min-width: 769px) { .sjBox { position: absolute; top: 0; left: 100%; box-shadow: 0px 5px 20px 0px rgba(192, 192, 192, 0.4); } .sjTitle { text-align: center; } .sjTitle::before { content: ''; position: absolute; display: block; width: 6px; height: 50px; background-color: #46aa2e; } .sjBox li { width: 150px; } .sjTitle:hover .sjLink { color: #46aa2e; } .sjLi::before { content: ''; display: block; width: 0; height: 0; border-top: 6px solid #46aa2e; border-right: 6px solid #fff; border-bottom: 6px solid #46aa2e; position: absolute; left: 0; top: 22px; z-index: 1; } .ejLi:hover .sjLi::before { display: block; } } @media only screen and (max-width: 768px) { .contentBox { position: fixed; top: 0; left: 100%; height: 100%; font-size: 0; } .backBtn { position: relative; display: inline-block; width: 45px; height: 100%; vertical-align: top; background: #f5f8fa; } .content { display: inline-block; width: calc(100% - 45px); } .moveBtn { display: block; color: #fff; background: #46aa2e; } .btn { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; height: 40px; display: block; text-align: center; line-height: 40px; font-size: 1.2rem; color: #46aa2e; padding: 0; } .yjTitle { border-bottom: 1px solid #f8f8f8; padding: 10px 0px; } .sjTitle { padding-left: 80px; } .jsDeg { transform: rotate(-90deg); } .line_right { display: block; width: 8px; height: 50px; background-color: #46aa2e; position: absolute; right: 0; top: 0; opacity: 0 } .line_show { opacity: 1; } .sjTitle::after { content: ''; display: block; width: 8px; height: 50px; background-color: #46aa2e; position: absolute; right: 0; top: 0; } } .yjTitle:hover .yjLink p { color: #fff!Important; transition: all .5s ease; } .jpActive p { color: #fff !important; }