.cateTitle{ text-align: center; font-size:36px; font-weight:700; line-height:54px; color: #0461b1; margin-top: 40px; margin-bottom: 20px; display: none; } .cateTitle p{ font-size:14px; height:auto; line-height:21px; color: #595959; font-weight: normal; } @media only screen and (max-width:768px){ .cateTitle{ display: none; } .iconfont2{ display:block !important; } } @media only screen and (min-width: 769px){ .categrayBox .contentBox .content{ text-align: left; } .categrayBox .contentBox .content > li{ display: inline-block; position: relative; overflow: hidden; vertical-align: top; } .yjTitle{ padding: 0 20px; border-radius: 5px; margin: 6px 0; margin-right: 14px; } .categrayBox .contentBox .content .iconfont { display: none; } .ejBox{ position: absolute; top: 100%; left: 0px; min-width: 100%; width: auto; opacity: 0; transform: translateY(30px); transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -webkit-transition: all 0.5s; /* Safari & Chrome */ -o-transition:all 0.5s; /*! display: -webkit-inline-box; */ z-index: 9; } .categrayBox .contentBox .content > li:hover .ejBox{ opacity: 1; transform: translateY(0px); } } .moveBtn{ display:none; color: #ffffff; line-height: 40px; width:100%; text-align: left; white-space:nowrap; padding: 0px 15px; background: #0461b1; font-weight: 700; z-index: 1; } .link{ position:relative; height: auto; } .yjTitle{ text-align: center; letter-spacing: 1px; transition: all 0.5s; } .yjLink{ position:relative; display: inline-block; color: #333; font-size: 14px; line-height: 34px; transition:all .5s ease; } .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; width: 100%; display: block; white-space: nowrap; } .ejTitle{ position:relative; background-color: #f3f3f3; border-bottom:0px solid #fff; padding: 0px 20px; line-height: 40px; transition:all .5s ease; } .ejLink{ display: block; color: #666; font-size:14px; } .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; display: none; } .icf{ transform:rotate(180deg); } .sjTitle{ position:relative; background-color:#fff; border-bottom:1px solid #e8e8e8; } .sjLink{ color:#7b8a96; font-size:16px; } .rotate{ transform:rotate(-90deg); } .ejTitle:hover{ background-color:#0461b1; } .ejTitle:hover .ejLink{ color:#fff; } .backBtn{ display:none; } .yjTitle:hover{ background: #0461b1; } .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); z-index: 9999; } .sjTitle { text-align: center; line-height: 30px; } .sjTitle::before { content: ''; position: absolute; display: block; width: 6px; height: 35px; background-color: #0461b1; } .sjBox li { width: 150px; } .sjTitle:hover .sjLink { color: #0461b1; } .sjLi::before { content: ''; display: block; width: 0; height: 0; border-top: 6px solid #0461b1; border-right: 6px solid #fff; border-bottom: 6px solid #0461b1; position: absolute; left: 0; top: 22px; z-index: 1; } .ejLi:hover .sjLi::before { display: block; } } @media only screen and (max-width:768px){ .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; } .yjTitle { border-bottom: 1px solid #f8f8f8; padding: 4px 0; } .yjLink{ padding:0; } .sjTitle { padding-left: 40px; line-height: 40px; } .sjTitle a { font-size: 14px; } .jsDeg { transform: rotate(-90deg); } .line_right { display: block; width: 8px; height: 50px; background-color: #0461b1; position: absolute; right: 0; top: 0; opacity: 0 } .line_show { opacity: 1; } .sjTitle::after { content: ''; display: block; width: 8px; height: 50px; background-color: #0461b1; position: absolute; right: 0; top: 0; } .ejBox{ position: static; } } .jpActive .yjLink{ color: #fff !important; } .jpActive{ background:#0461b1; } .categrayBox .contentBox .content > li:hover { overflow: visible; }