/* eyoucms.com 鏄撲紭CMS -- 濂界敤,鍏嶈垂,瀹夊叏 */ .product-box{ width: 100%; padding-top: 20px; float: center; background:#ededed; } .product-title{ background-color: #CC0000; width: 229px; padding-top: 42px; padding-bottom: 20px; float: left; } .product-title h2{ font-size: 24px; color: #fff; margin-left: 30px; } .product-title h3{ font-size: 13px; color: #eee; font-family: arial; margin-left: 30px; margin-top: 18px; } .product-title span{ width: 1px; height: 66px; background-color: #990000; display: block; margin-left: 30px; margin-top: 30px; } #product{ overflow: hidden; } .cp-box { width:100%; border-radius:5px; height:108px; background: #ededed;} .cp-box ul { display: table; margin: 0 auto; width:100%; text-align:center; background: #ededed; display: flex; flex-direction: row; justify-content: center; } .cp-box ul li{ float:left; text-align:center; list-style: none; cursor:pointer; padding-bottom:0px; width:25%} .cp-box ul li dl{ height:108px; background:#fff; text-align:center; padding:15px 26px; position:relative} .cp-box ul li dl dt{ width:35px; height:35px; background-repeat:no-repeat; margin:0 auto 6px;} .cp-box ul li dl dd{ font-size:18px; font-weight:bold;} .cp-box ul li:nth-child(1) dl dt{ background-image:url(../../images/tb01.png)} .cp-box ul li:nth-child(2) dl dt{ background-image:url(../../images/tb02.png)} .cp-box ul li:nth-child(3) dl dt{ background-image:url(../../images/tb03.png)} .cp-box ul li:nth-child(4) dl dt{ background-image:url(../../images/tb04.png)} .cp-box ul li:nth-child(5) dl dt{ background-image:url(../../images/tb05.png)} .cp-box ul li:nth-child(6) dl dt{ background-image:url(../../images/tb06.png)} .cp-box ul li:nth-child(7) dl dt{ background-image:url(../../images/tb07.png)} .cp-box ul li dl:after{ content:""; width:1px; height:18px; background:#c4c4c4; position:absolute; right:0; bottom:20px;} .cp-box ul li:hover dl{ background:#e21e2c} .cp-box ul li:hover dl dd{ color:#fff;} .cp-box ul li:hover dl:after{ display:none;} .cp-box ul li:nth-child(1):hover dl dt{ background-image:url(../../images/tb01-1.png)} .cp-box ul li:nth-child(2):hover dl dt{ background-image:url(../../images/tb02-1.png)} .cp-box ul li:nth-child(3):hover dl dt{ background-image:url(../../images/tb03-1.png)} .cp-box ul li:nth-child(4):hover dl dt{ background-image:url(../../images/tb04-1.png)} .cp-box ul li:nth-child(5):hover dl dt{ background-image:url(../../images/tb05-1.png)} .cp-box ul li:nth-child(6):hover dl dt{ background-image:url(../../images/tb06-1.png)} .cp-box ul li:nth-child(7):hover dl dt{ background-image:url(../../images/tb07-1.png)} .gd{ margin-left: 30px; margin-top: 30px; } .gd a{ color: #ddd; font-size: 15px; width: 145px; height: 46px; border: 1px solid #fff; display: block; line-height: 48px; position: relative; } .gd a p{ margin-left: 17px; } .gd a::before{ content: ""; width: 58px; height: 7px; background: url(../img/tb_07.png) no-repeat; position: absolute; right: 0; margin-right: -30px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .gd a:hover{ background-color: #fff; color: #CC0000; } .gd a:hover::before{ margin-right: -40px; } .prodict-1{ width: 321px; height: 302px; position: relative; float: left; margin-left: 34px; } .prodict-1 a img{ width: 321px; display: block; } .prodict-1 a p,.product-2 a p,.product-y-t p{ font-size: 15px; color: #333333; font-weight: 600; position: absolute; width: 90%; height: 68px; text-align: center; line-height: 68px; bottom: 30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); background: rgba(250,250,250,.8); } .prodict-1:hover p,.product-2:hover p,.product-y-t:hover a{ color: #CC0000; } .product-2{ width: 584px; height: 246px; position: relative; margin-top: 34px; } .product-2 img{ width: 584px; display: block; } .product-right{ width: 582px; float: left; margin-left: 34px; } .product-left{ float: left; } .product-y-t{ width: 582px; height: 582px; position: relative; overflow: hidden; } .carousel-inner{ position: absolute; width: 100%; height: 537px; top: 0; left: 0; } .carousel-item{ float: left; height: 537px; } .carousel-btn{ position: absolute; width: 109px; height: 90px; bottom: 0; cursor: pointer; } .carousel-prev-btn{ left: 8px; background: #CC0000 url(../img/tb_07.png) no-repeat; background-position: 50%; transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); } .carousel-next-btn{ left: 8px; margin-left: 109px; background: #f7f7f7 url(../img/tb_11.png) no-repeat; background-position: 50%; } .product-y-t p{ bottom: 123px; } .product-y-t a{ width: 100%; height: 100%; display: block; color: #333; } .product-list{ background: #ededed; width:100%; margin: 0 auto; padding-bottom:36px; } .product-list ul{ width:100%; /*display: flex;*/ flex-direction: row; justify-content: center; text-align:center; float:left; background:#ededed; padding:0px; overflow: hidden; } .product-list ul li{ width: 50%; position: relative; overflow: hidden; float: left; margin: 0px; background-color: #ffffff; list-style: none; text-align: center; } .product-list ul li img{ width: 100%; height: 100%; display:inline-block float: left; padding-top: 0px; } .product-list ul li:hover img{ transform: scale(1.1,1.1); } .product-list ul li img{ width: 100%; transition-duration: 1s; } .product-list ul li p{ position: absolute; font-size: 18px; font-weight: bold; text-align: right; line-height: px; width: 100%; bottom:2%; height:32px; line-height:32px; padding: 0px 0; padding-right:24px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); } /*.product-list ul li:hover p{ color: #ffffff; background-color: rgba(255, 19, 42, 0.8); } */ .product-list ul li:hover{ /*box-shadow: 0px 2px 6px 0px rgba(212, 0, 34, 0.8); border-bottom: #d40022 3px solid;*/ } .page-box{ position: relative; height: 44px; margin-top: 30px; } .page-box ul{ overflow: hidden; position: absolute; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); } .page-box ul li{ float: left; margin: 5px; border: 1px solid #ccc; height:34px; line-height:24px; } .page-box ul li.cur{ border-color: #CC0000; background-color: #CC0000; color:#FFF; } .page-box ul li.cur a{ border-color: #CC0000; background-color: #CC0000; color:#FFF; } .page-box ul li span{ margin: 5px; padding: 12px 12px; height:34px; line-height:24px; } .page-box ul li span{line-height:38px; text-align:center; font-size:15px;} .page-box ul li a{ font-size: 15px; color: #666; padding: 6px 12px; display: block; }