.moveBtn{ display:none; color:#fff; width:100%; height:auto; line-height:40px; text-align:center; background-color:#333; border:1px solid #333; white-space:nowrap; margin:0px 0px 20px; border-radius:0px; } .contentBox{ width:100%; height:auto; overflow:visible; } .link{ position:relative; } .yjTitle{ padding-right:20px; } .yjLink{ position:relative; display:block; color:#333; font-size:16px; transition:all .5s ease; line-height:40px; } .iconfont1{ position:absolute; right:45px; top:0px; bottom:0px; width:50px; color:#7b8a96; display:flex; align-items:center; justify-content:center; font-size:16px; } .ejLi{ position:relative; } .ejTitle{ position:relative; background-color:#fff; border-bottom:1px solid #e8e8e8; padding-left:50px; transition:all .5s ease; } .ejLink{ color:#86939e; font-size:16px; } .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:#86939e; font-size:16px; transition:all .5s ease; } .icf{ transform:rotate(180deg); } .sjTitle{ position:relative; background-color:#fff; border-bottom:1px solid #e8e8e8; } .sjLink{ color:#7b8a96; font-size:16px; } .ejBox{ display:none; } .rotate{ transform:rotate(-90deg); } .ejTitle:hover{ background-color:#f5f8fa; } .backBtn{ display:none; } .yjLink:hover{ color:#fff; background:#ca2929; border:1px solid #ca2929; } .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: #04abf4; } .sjBox li { width: 150px; } .sjTitle:hover .sjLink { color: #01a5ec; } .sjLi::before { content: ''; display: block; width: 0; height: 0; border-top: 6px solid #04abf4; border-right: 6px solid #fff; border-bottom: 6px solid #04abf4; 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; z-index: 999; background: #fff; } .backBtn { position: relative; display: inline-block; width: 45px; height: 100%; vertical-align: top; background: #f5f8fa; } .categrayBox .content { display: inline-block; width: calc(100% - 45px); } .moveBtn { display: block; } .categrayBox .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: #7b8a96; padding: 0; } .yjTitle { border-bottom: 1px solid #dfdfdf; padding: 0px; } .yjTitle .yjLink { padding-left: 20px; } .sjTitle { padding-left: 80px; } .jsDeg { transform: rotate(-90deg); } .line_right { display: block; width: 8px; height: 50px; background-color: #04abf4; position: absolute; right: 0; top: 0; opacity: 0 } .line_show { opacity: 1; } .sjTitle::after { content: ''; display: block; width: 8px; height: 50px; background-color: #04abf4; position: absolute; right: 0; top: 0; } } @media only screen and (min-width: 769px){ .categrayBox .content > li{ display: inline-block; } .yjLink{ font-size: 14px; line-height: 40px; padding: 0px 30px; border: 1px solid #ededed; } .jp_hcd_cateCn{ font-size:32px; color:#121212; font-weight: bold; } .jp_hcd_cateEn{ font-size:14px; color:#999; } .jp_hcd_cateFlex{ display: block; justify-content: space-between; align-items: center; border-bottom: 2px solid #ca2929; padding: 20px 0px 10px; margin: 0px auto 20px; max-width: 1240px; } } .jp_hcd_cateLeft{ display: none; } .jp_hcd_cateFixedBox{ width: 100% !important; position: fixed; top: 100px; z-index: 9; background: #fff; } .jp_hcdFixed:before{ content: ''; height: 96px; width: 100%; position: relative; display: block; } @media only screen and (max-width: 1000px){ .jp_hcd_cateFixedBox{ position: relative; top: 0px; } .jp_hcdFixed:before{ content: ''; display: none; } } @media only screen and (max-width: 768px){ .jp_hcd_cateFlex{ display: block; position: relative; z-index: 999; } }