.c_portalResEbizads_banner-01001 .p_banner{ height:360px; overflow:hidden; position:relative; } .c_portalResEbizads_banner-01001 .p_imageA{ width:100%; height:100%; position:relative; } .c_portalResEbizads_banner-01001 .bannerImg{ position:absolute; width:100%; height:100%; object-fit:cover; top:50%; transform:translateY(-50%); } .c_portalResEbizads_banner-01001 .h_text{ position:absolute; width:100%; max-width:1240px; padding:0 20px; height:auto; top:50%; left:50%; transform:translate(-50%,-50%); height: 117px; } .c_portalResEbizads_banner-01001 .h_bannerTitle{ font-size: 30px; color:#fff; letter-spacing:2px; text-align: center; } .c_portalResEbizads_banner-01001 .h_bannerTitle:before { content: ""; width: 1px; height: 54px; background: #fff; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .c_portalResEbizads_banner-01001 .h_bannerTitle:after { content: ""; width: 9px; height: 9px; border-radius: 5px; background: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } .c_portalResEbizads_banner-01001 .h_bnnerSummry{ font-size:24px; color:#fff; letter-spacing:2px; } @media only screen and (max-width: 768px){ .c_portalResEbizads_banner-01001 .p_banner{ height:200px; overflow:hidden; position:relative; } } .c_portalResNews_category-01001 .categrayBox, .c_portalResIntro_category-01001 .categrayBox, .c_portalResAtlas_category-01001 .categrayBox, .c_portalResProduct_category-01001 .categrayBox{ position: absolute; width: 100%; bottom: 0px; z-index: 9; } #c_portalResProduct_category-1589008512976.c_portalResProduct_category-01001 .categrayBox{ position: static; } .c_portalResProduct_category-01001 .categrayBox .iconfont1{ display: none; } .cateTitle{ text-align: center; font-size:36px; font-weight:700; line-height:54px; color: #eecf99; 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; } } @media only screen and (min-width: 769px){ .categrayBox .contentBox .content{ text-align: center; } .categrayBox .contentBox .content > li{ display: inline-block; position: relative; overflow: hidden; vertical-align: top; } .yjTitle{ padding: 0px 20px; line-height: 56px; } .categrayBox .contentBox .content .iconfont { display: none; } .ejBox{ position: absolute; top: 100%; left: 0px; min-width: 100%; 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; */ } .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: rgba(0, 0, 0, 0.9); font-weight: 700; z-index: 1; } .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; letter-spacing: 1px; } .yjLink{ position:relative; display: inline-block; color: #333; font-size: 16px; 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; } .ejTitle{ position:relative; background-color:#fff; 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:#000000; } .ejTitle:hover .ejLink{ color:#fff; } .backBtn{ display:none; } .yjTitle:hover{ background: #000000; } .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: #000000; } .sjBox li { width: 150px; } .sjTitle:hover .sjLink { color: #01a5ec; } .sjLi::before { content: ''; display: block; width: 0; height: 0; border-top: 6px solid #000000; border-right: 6px solid #fff; border-bottom: 6px solid #000000; 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: 60px; 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; } .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 #f8f8f8; padding: 10px 0px; } .sjTitle { padding-left: 80px; } .jsDeg { transform: rotate(-90deg); } .line_right { display: block; width: 8px; height: 50px; background-color: #eecf99; position: absolute; right: 0; top: 0; opacity: 0 } .line_show { opacity: 1; } .sjTitle::after { content: ''; display: block; width: 8px; height: 50px; background-color: #000000; position: absolute; right: 0; top: 0; } .ejBox{ position: static; } } .yjTitle:hover .yjLink p{ color:#fff!Important; transition: all .5s ease; } .categrayBox .contentBox .content > li:hover { overflow: visible; } .jpActive *{ color: #fff !important; } .jpActive{ background:#000; }