.optical_nav{ overflow: hidden; float: left; width: 100%; margin-top: 10px; position: absolute; bottom: -2px; } .optical_nav_li a{ display: block; float: left; margin-right: 10px; height: 46px; line-height: 46px; color: #333; padding: 0 20px; } .optical_nav_act a{ background: url(../images/hualu/chanye/nav_bj.png) no-repeat center bottom; color: #fff; background-size: 100% 100%; } .position { float: none; width: 1200px; margin: 20px auto 0; } .indus_con{ width: 1200px; margin: 20px auto; overflow: hidden; border-bottom: 1px dotted #e6e6e6; padding: 40px 0; } .indus_img{ width: 460px; overflow: hidden; height: 250px; padding: 10px; font-size: 0; background-color: #fafafa; text-align: center; display: table-cell; vertical-align: middle; } .indus_img a{ display: block; overflow: hidden; width: 100%; height: 100%; } .indus_img img{ width: auto; height: auto; max-width: 100%; max-height: 100%; } .indus_info{ padding: 20px; width: calc(100% - 520px - 42px); /* height: 228px; */ border: 1px solid #fafafa; } .indus_tit{ font-size: 24px; display: inline-block; padding-bottom: 10px; margin-bottom: 27px; } .indus_tit a{ color: #484848; } .indus_tit a:hover{ color: #08308f; } .indus_cont{ line-height: 24px; /* margin-bottom: 30px; */ /* overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; */ /* height: 195px; */ } .indus_cont p{ text-indent: 32px; } .indus_wrap:nth-child(odd) .indus_left{ float: left; } .indus_wrap:nth-child(even) .indus_left{ float: right; } .indus_wrap:nth-child(odd) .indus_info{ float: right; } .indus_wrap:nth-child(even) .indus_info{ float: left; } .common_con{ width: 1300px; margin: 0 auto; position: relative; } .con_prev,.con_next{ background-image: url(/images/hualu/chanye/prev.png)!important; position: absolute; left: 10px; top: 50%; margin-top: -15px; width: 16px; height: 16px; background-size: 16px 16px!important; } .con_next { background-image: url(/images/hualu/chanye/next.png)!important; right: 10px; left: auto; } .con_prev:hover{ background-image: url(/images/hualu/chanye/prev_h.png)!important; } .con_next:hover{ background-image: url(/images/hualu/chanye/next_h.png)!important; } #serv { width: 1200px; padding-bottom: 40px; } .serv_li { background: #fff; } .serv_li>a{ display: block; } .serv_img{ width: 100%; height: 195px; overflow: hidden; } .serv_img img{ width: 100%; height: 100%; } .serv_li:hover .serv_img img{ transform: scale(1.2); transition: 1s all; } .serv_info { color: #333; line-height: 28px; height: 50px; padding: 10px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-align: center; } .details_cont p{ letter-spacing: 3px; line-height: 30px; } .bluray_nav{ width: 1200px; margin:50px auto; overflow: hidden; } .bluray_tit{ font-size: 20px; font-weight: bold; text-align: center; margin: 0 0 50px; } .bluray_nav_li{ float: left; width: calc(100% / 6 - 20px); margin-right: 20px; text-align: center; } .bluray_nav_li:last-child{ margin-right: 0; } @media screen and (max-width: 750px) { .indus_wrap:nth-child(even) { background-color: #fff; } .indus_con{ width: calc(96% - 20px); margin: 20px auto 0; padding: 0; height: auto; background-color: #fafafa; position: relative; padding: 10px; } .indus_img { width: 100%; height: auto; /* position: absolute; z-index: 2; */ background: none!important; padding:0; } .indus_wrap:nth-child(odd) .indus_img{ left: 0; top: -35px; } .indus_wrap:nth-child(even) .indus_img{ right: 0; top: -35px; } .indus_info { padding: 10px 0 0; width:100%; position: unset; } .indus_tit { font-size: 18px; display: inline-block; height: 30px; line-height: 30px; margin-bottom: 0; color: #3f559d; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: calc(100% - 20px); padding-bottom: 0; } .indus_cont{ margin-bottom: 0; /* background: url("../images/hualu/mobile/yin_07.png") no-repeat 5px 25px; */ /* background-color: #fafafa; */ padding: 10px; display: block; height: auto; } .indus_cont>p{ font-size: 15px; } .indus_wrap:nth-child(even) .indus_img { left: 0; top: -35px; background: url(../images/hualu/chanye/cy_bj2.png) no-repeat; } .common_con{ width: 100%; } .con_prev, .con_next{ display: none; } #serv { width: 96%; padding-bottom: 0px; } .serv_li { width: 49%!important; background: #fff; } .serv_li>a{ display: block; } .serv_img{ width: 100%; /* height: 195px; */ overflow: hidden; } .serv_img img{ width: 100%; height: auto; } .serv_li:hover .serv_img img{ transform: scale(1.2); transition: 1s all; } .serv_info { font-size: 12px; line-height: 20px; display: block; } .bluray_tit{ margin-bottom: 10px; } .bluray_nav{ width: 96%; margin: 0 auto; } .bluray_nav_li{ width: calc(100% / 3 - 20px); margin-bottom: 10px; } .details{ width: 96%!important; margin: 20px auto!important; padding: 0!important; } .title_wrap{ overflow-x: scroll; overflow-y: hidden; height: 46px; background: none; border-bottom: 2px solid #e6e6e6; display: block; width: 96%; margin: 20px auto; } .optical_nav{ overflow: auto; width: auto; margin: 0 auto; display: flex; justify-content: space-between; } .optical_nav_li { width: auto; white-space: nowrap; height: 46px; line-height: 46px; } }