锘?header .nav .category > a { border-radius: 0px; } .header .segment { display: none; } .body { margin-top: 152px; } /*banner*/ .banner { height: 420px; background: #F8F8F8; box-shadow: inset 0px -1px 0px #EEEEEE; position: relative; } .banner-list { height: 420px; position: relative; z-index: 1; } .banner-list li { position: absolute; width: 100%; height: 420px; top: 0; left: 0; transition: all 1.5s; } .banner-list li a { display: block; height: 420px; background-size: cover; } .banner-paging { position: absolute; bottom: 44px; left: 0; padding-left: 120px; z-index: 200; display: none; } .banner-paging span { display: inline-block; position: relative; width: 10px; height: 10px; line-height: 8px; text-align: center; border-radius: 50%; margin-right: 10px; } .banner-paging em { display: inline-block; width: 6px; height: 6px; border-radius: 50%; vertical-align: middle; } .banner-btn { display: none; position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 54px; text-align: center; z-index: 200; } .banner-btn .ico60 { cursor: pointer; transition: all 0.3s; } .banner-btn .ico60:hover { opacity: 0.8; } .banner:hover .banner-btn { display: none; } .banner .btn-pre { left: 20px; text-align: left; } .banner .btn-next { right: 20px; text-align: right; } .banner .category { } .banner .category ul { position: absolute; left: 0px; top: 0px; width: 248px; height: 376px; padding-top: 44px; background: rgba(0, 140, 216, 0.71); backdrop-filter: blur(10px); z-index: 200; } .banner .category li { height: 56px; line-height: 56px; position: relative; } .banner .category li a { padding: 0px 22px; display: block; color: #fff; text-decoration: none; } .banner .category li:hover > a { background: #fff; color: #333; } .banner .category li:hover dl { display: block; } .banner .category dl { display: none; width: 248px; position: absolute; right: -248px; top: 0px; background: rgba(0, 140, 216, 0.71); backdrop-filter: blur(10px); z-index: 200; box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.2); overflow: hidden; } .banner .category dd a { font-size: 14px; } .banner .category dd a:hover { background: #fff; color: #333; } .banner .category .icoys30 { margin: -2px 6px 0px 0px; } .banner .category .icoys-category0 { background-position: -545px -255px; } .banner .category .icoys-category1 { background-position: -605px -255px; } .banner .category .icoys-category2 { background-position: -665px -255px; } .banner .category .icoys-category3 { background-position: -725px -255px; } .banner .category .icoys-category4 { background-position: -785px -255px; } .banner .category .icoys-category5 { background-position: -845px -255px; } .banner .category li:hover .icoys30 { filter: brightness(0); } .section { padding: 80px 0px; } .section .title { text-align: center; padding-bottom: 40px; } .section .title p { font-size: 20px; color: rgba(0, 140, 216, 0.12); letter-spacing: 0.08em; } .section .title h3 { font-size: 24px; margin-top: -4px; } .section .links { text-align: center; padding-top: 40px; } .advantage { } .advantage .item { width: 295px; float: left; margin-top: 40px; margin-right: 40px; transition: all 0.5s ease-out; } .advantage .item:nth-child(-n+4) { margin-top: 0px; } .advantage .item:nth-child(4n) { margin-right: 0px; } .advantage .item:hover { box-shadow: 0px 10px 6px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.1); } .advantage .item a { text-decoration: none; } .advantage .pic { height: 160px; border-radius: 5px 5px 0px 0px; overflow: hidden; } .advantage .pic img { width: 100%; height: 100%; object-fit: cover; } .advantage .desc { height: 113px; padding: 16px; background: #F9F9F9; border-radius: 0px 0px 5px 5px; } .advantage .desc .name { color: #008CD8; overflow: hidden; text-overflow: ellipsis;white-space:nowrap; } .advantage .text { height: 84px; line-height: 28px; padding-top: 8px; overflow: hidden; } .product { background: #F9F9F9; } .product .item { float: left; width: 242px; height: 334px; transition: all 0.5s; position: relative; margin-right: 20px; margin-top: 20px; background: #fff; overflow: hidden; border-radius: 4px; box-shadow: 0px 4px 9px 0px rgba(150, 150, 150, 0.23); } .product .item:nth-child(5n) { margin-right: 0px; } .product .item:nth-child(-n+5) { margin-top: 0px; } .product .item a { text-decoration: none; } .product .item .pic { width: 204px; height: 130px; margin: auto; margin-top: 20px; transition: all 0.3s; } .product .item .name { font-weight: bold; height: 36px; line-height: 18px; margin: 30px 20px 0px 20px; overflow: hidden; } .product .item .desc { height: 108px; padding: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all 0.3s; position: relative; } .product .item .desc table { width: 100%; text-align: left; } .product .item .desc td { height: 24px; } .product .item .desc .ch3 { font-weight: bold; } .product .item .desc .num { width: 136px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product .item .tag { position: absolute; top: 12px; left: 12px; } .product .item .tag span { vertical-align: middle; } .product { padding: 40px 0px; } .product .item .c1 { font-weight: bold; } .product .item:hover { box-shadow: 3px 4px 10px 0px rgba(162, 162, 162, 0.3); } .product .item:hover .desc { background: #0CA3F3; color: #fff; height: 116px; padding: 16px 20px; } .product .item:hover .pic { width: 152px; height: 100px; } .product .item:hover .name { margin: 16px 20px } .product .item:hover .action { height: 32px; } .product .item:hover .ch3 { color: #fff !important; } .product .item:hover .c1 { color: #fff !important; } .product .item .action { height: 0px; position: absolute; width: 204px; padding: 0px 20px; left: 0px; bottom: 14px; overflow: hidden; transition: all 0.3s; } .product .item .action span { display: inline-block; width: 57px; height: 32px; text-align: center; border-radius: 16.5px; background: #FFFFFF; cursor: pointer; } .news { padding: 80px 0px 0px 0px } .news .switcher { position: relative; } .news .switcher .box { width: 1180px; height: 414px; overflow: hidden; margin: auto; position: relative; } .news .switcher .list { position: absolute; height: 414px; left: 0px; top: 0px; } .news .switcher-next .switcher-btn { position: absolute; top: 190px; cursor: pointer; } .news .switcher-next .switcher-btn:hover { opacity: 0.8; } .news .switcher-next .btn-pre { left: 0px; } .news .switcher-next .btn-next { right: 0px; } .news .switcher-paging { text-align: center; padding-top: 36px; } .news .switcher-paging span { display: inline-block; width: 16px; height: 16px; margin-right: 16px; transform: rotate(45deg); background: #D8D8D8; } .news .switcher-paging span:last-child { margin-right: 0px; } .news .switcher-paging .cur { background: #0CA3F3; } .news .item { float: left; width: 380px; height: 263px; margin-right: 20px; border-radius: 10px; overflow: hidden; position: relative; transition: all 0.5s; margin-top: 72px; } .news .item:last-child { margin-right: 0px; } .news .item img { width: 100%; height: 100%; object-fit: cover; } .news .item .desc { position: absolute; bottom: 0px; left: 0px; width: 348px; padding: 0px 16px; height: 54px; background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(10px); } .news .item .name { height: 24px; line-height: 24px; overflow: hidden; color: #008CD8; margin: 16px 0px 8px 0px; } .news .item .text { height: 84px; line-height: 28px; overflow: hidden; color: #666666; } .news .on { height: 413px; margin-top: 0px; } .news .on .name { height: 48px; } .news .on .desc { height: 172px; } .news .on .text { } .partner .item { width: 228px; height: 128px; margin: 0px 40px 40px 0px; float: left; } .partner .item:nth-child(5n) { margin: 0px 0px 40px 0px; } .partner .item .pic { height: 80px; text-align: center; } .partner .item .pic img { width: 180px; height: 100%; object-fit: contain; } .partner .item .name { height: 48px; line-height: 48px; text-align: center; overflow: hidden; white-space: nowrap; background: #F9F9F9; } 青柠影视在线播放,青青热久免费精品视频在,青青热久免费精品视频在