/* header */ .header{ background-color: rgba(18,18,20,0.3); } /*banner*/ .banner { margin-top: -10px; width: 100%; height: 520px; position: relative; overflow: hidden; } .banner ul { width: 500%; position: absolute; left: 0; top: 0; } .banner ul li { float: left; width: 100%; background-size: cover!important; height: 520px; overflow: hidden; } .banner ul li img { width: 100%; max-width: 100%; height: 520px; display: block; margin: auto; } .banner ol { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); } .banner ol li { width: 31px; height: 31px; float: left; margin-right: 10px; position: relative; top: 8px; cursor: pointer; } .banner ol li>i{ display: inline-block; width: 31px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); position: relative; top: 8px; } .banner ol li:last-child{ margin-right: 0; } .banner ol li.current>i{ background: #fff; } .index-item { position: relative; text-align: center; overflow: hidden; } .index-item>.title { font-size:24px; display: inline-block; padding-top: 60px; font-weight: bold; } .index-item>.title>i { display: block; font-size:16px; line-height: 35px; color:rgba(3,16,23,0.4); font-weight: normal; } .more-btn { display: inline-block; margin-top: 30px; margin-bottom: 60px; font-size:14px; padding: 8px 16px; border: 1px solid #041017; border-radius: 20px; } .more-btn:after { content: ''; width: 16px; height: 13px; display: inline-block; margin-left: 7px; position: relative; top: 2px; background-image: url(../../images/front/arrow.png); background-repeat: no-repeat; background-position: center; background-size: 100%; } .more-btn:hover { color:#fff; border: 1px solid #fff; background-color: #041017; } .more-btn:hover:after { background-image: url(../../images/front/arrow-white.png); } /* ??????? */ .index-item-product { background-image: url(../../images/front/index-bg-1.jpg); background-repeat-y: no-repeat; background-position: bottom center; background-size: cover; } .index-item-product .items { width: 1182px; height: 471px; margin: 25px auto 0; } .index-item-product .items .item { float: left; width: 375px; height: 100%; background-color: #fff; box-shadow: 0px 0px 10px 1px rgba(0,37,61,0.08); margin-right: 28px; } .index-item-product .items .item:last-child { margin-right:0; } .index-item-product .items .item .item-image { height: 180px; background-repeat: no-repeat; background-size: cover; background-position-x: center; } .index-item-product .items .item .item-content { padding: 30px; font-size: 14px; } .index-item-product .items .item .item-type { font-size:18px; text-align: left; } .index-item-product .items .item .item-type >a { font-size: 14px; line-height: 20px; font-weight: normal; float: right; } .index-item-product .items .item .item-type >a:after { content: ''; width: 16px; height: 13px; display: inline-block; margin-left: 7px; position: relative; top: 2px; background-image: url(../../images/front/arrow.png); background-repeat: no-repeat; background-position: center; background-size: 100%; } .index-item-product .items .item .item-type >a:hover { color: #0079D6; } .index-item-product .items .item .item-type >a:hover:after { background-image: url(../../images/front/arrow-hover.png); } .index-item-product .items .item .item-introduce { line-height: 25px; text-align: left; margin: 10px 0; } .index-item-product .items .item .item-content>h3{ text-align: left; padding: 20px 0; } .index-item-product .items .item .item-content .item-case { float: left; width: 147px; margin-right: 20px; } .index-item-product .items .item .item-content .item-case:last-child { margin-right:0; } .index-item-product .items .item .item-content .item-case-image { position: relative; height: 70px; background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #eee; } .index-item-product .items .item .item-content .item-case-image span { display:none; position: absolute; top: 0; right: 0; left: 0; bottom: 0; line-height: 70px; color: #fff; background-color: rgba(37,48,54,0.7); } .index-item-product .items .item .item-content .item-case-image span:after { content: ''; width: 16px; height: 13px; display: inline-block; margin-left: 7px; position: relative; top: 2px; background-image: url(../../images/front/arrow-white.png); background-repeat: no-repeat; background-position: center; background-size: 100%; } .index-item-product .items .item .item-content .item-case:hover .item-case-image span { display:block; } .index-item-product .items .item .item-content .item-case-name{ padding:10px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ???????? */ .index-item-about { background-image: url(../../images/front/index-bg-2.jpg); background-repeat-y: no-repeat; background-position: bottom center; background-size: cover; font-size:14px; } .index-item-about>.title { color:#fff; } .index-item-about>.title>i { color:rgba(255,255,255,0.4); } .index-item-about .items { width: 1182px; height: 92px; margin: 25px auto 0; text-align: left; } .index-item-about .items .item{ position: relative; float: left; width: 280px; height: 92px; color: #fff; margin-right:20px; padding: 18px 0 20px 130px; box-sizing: border-box; background-color:rgba(4,16,23,0.5); } .index-item-about .items .item:last-child { margin-right:0; } .index-item-about .items .item .icon { position: absolute; top:20px; left:60px; width: 52px; height: 52px; background-image: url(../../images/front/index-icon.png); background-repeat: no-repeat; } .index-item-about .items .item:nth-child(1) .icon{ background-position: -104px 0; } .index-item-about .items .item:nth-child(2) .icon{ background-position: -156px 0; } .index-item-about .items .item:nth-child(3) .icon{ background-position: 0 0; } .index-item-about .items .item:nth-child(4) .icon{ background-position: -52px 0; } .index-item-about .items .item>h2 { font-size:28px; font-weight: normal; } .index-item-about .items .item>p { margin-top:6px; } .index-item-about .introduce { width: 1182px; box-sizing: border-box; margin: 30px auto 60px; padding: 33px 50px; line-height: 30px; text-align: left; background-color: #fff; } /* ??????? */ .index-item-news { background-color: #F5F9FC; font-size: 14px; } .index-item-news .tab-title { font-size:18px; display: inline-block; width: 282px; margin-bottom: 40px; border-bottom: 1px solid #D0D4D7; } .index-item-news .tab-title li { display: inline-block; padding: 25px 0 15px; margin: 0 30px; position: relative; bottom: -1px; cursor: pointer; } .index-item-news .tab-title li.this { color: #0F81D9; border-bottom: 2px solid #0F81D9; font-weight: bold; } .index-item-news .tab-item{ display: none; } .index-item-news .tab-item.show{ display: block; } .index-item-news .new-bar { width: 1182px; height: 350px; margin: 0 auto; text-align: left; } .index-item-news .new-left { float: left; width: 575px; height: 100%; background-color: #fff; box-shadow: 0px 0px 10px 1px rgba(0,37,61,0.08); } .index-item-news .new-left .image{ height: 205px; background-repeat: no-repeat; background-size: cover; background-position-x: center; } .index-item-news .new-left h3 { position: relative; font-size:24px; line-height: 30px; border-left: 2px solid #0F81D9; padding-left: 29px; padding-right: 105px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 27px; } .index-item-news .new-left h3 .date{ position: absolute; right: 30px; top: 2px; color: rgba(4,16,23,0.5); font-size: 14px; font-weight: normal; } .index-item-news .new-left p { margin: 15px 30px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; line-height: 30px; overflow: hidden; height: 60px; } .index-item-news .new-right { float: left; width: 575px; height: 100%; margin-left: 30px; } .index-item-news .new-right li { height: 110px; margin-bottom: 10px; background-color: #fff; box-shadow: 0px 0px 10px 1px rgba(0,37,61,0.08); overflow: hidden; } .index-item-news .new-right li:last-child { margin-right:0; } .index-item-news .new-right h3 { position: relative; font-size:18px; line-height: 24px; border-left: 2px solid #0F81D9; padding-left: 29px; padding-right: 105px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 27px; } .index-item-news .new-right h3 .date{ position: absolute; right: 30px; top: 2px; color: rgba(4,16,23,0.5); font-size: 14px; font-weight: normal; } .index-item-news .new-right p { margin: 5px 30px 15px; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; line-height: 40px; overflow: hidden; height: 40px; } .new-left:hover h3, .index-item-news .new-right li:hover h3 { color: #0F81D9; } @media screen and (max-width: 480px){ .banner { height: 150px; } .banner ul li { height: 150px; } .banner ul li img { height: 150px; } .banner ol { bottom: 10px; } .index-item-product .items { width: 100%; height: auto; } .index-item-about .items { width: 100%; height: auto; } .index-item-about .items .item { float: none; display: block; margin: auto; } .index-item-about .items .item:last-child{ margin: auto; } .index-item-about .introduce{ width: 100%; } .index-item-news .new-bar{ width: 100%; } .index-item-news .new-left,.index-item-news .new-right { width: 100%; margin: 0; } .index-item-news .new-right { margin-top: 10px; } }国产成人精欧美精品视频,一对一听指挥app,一对一视频聊天听指挥app,国精产品WNW2544