@import "common.css";

/* 首页轮播 */
.banner{width: 100%; height: 680px; margin-top: 150px;}
/*.banner::before{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("https://anruotai-metal.oss-cn-hangzhou.aliyuncs.com/image/banner-mask.png") center repeat; z-index: 2; content: '';}*/
.banner .video-cover{width: 100%; height: 100%; object-fit: cover;}
.banner .video{top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; background-color: transparent; z-index: 1;}
.banner .video-text{width: 100%; z-index: 3; left: 50%; transform: translateX(-50%);}
.banner .video-text b:first-child{margin-top: -50px;}
.banner .video-text b{font-size: 58px; line-height: 1.2; letter-spacing: 2px;}
.banner .video-text p{line-height: 40px; letter-spacing: 1px; white-space: pre;}
.banner .video-text .customized-buttons{width: 180px; height: 50px;}
.banner .video-text .customized-buttons:before{width: 10%; height: 100%; background-color: #22252F; opacity: 0; position: absolute; content: ''; transition: all .3s ease;}
.banner .video-text .customized-buttons:hover:before{width: 100%; opacity: 1;}
.banner .message{bottom: 50px; z-index: 3; left: 50%; transform: translateX(-50%);}
.banner .message i{font-size: 25px;animation: jump 1.5s linear infinite;}


/* 统计 */
.statistics-box{height: 220px; background: url("https://anruotai-nickel.oss-cn-hangzhou.aliyuncs.com/image/statistics-bg.jpg") center no-repeat fixed; background-size: cover; position: relative;}
.statistics-box::before{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,.7); content: ''; z-index: 1;}
.statistics{height: 150px;}
.statistics li:not(:last-child):after{width: 1px; height: 60px; background: #EEEEEE; position: absolute; top:45px; right: 0; content: "";}
.statistics li p span{font-size:45px; line-height:35px;}
.statistics li p em{margin-top: -5px;}
.statistics.home li:not(:last-child):after{background-color: rgba(255,255,255,.28);}
.statistics.home li p span,.statistics.home li p em{color: #FFFFFF;}
.statistics.home li i{color: #F3F3F3;}

/* 介绍 */
.about .about-image{width: 630px; height: 510px;}
.about .about-image::before{width: 450px; height: 400px; background-color: var(--main-color);  position: absolute; left: 60px; top: 55px; z-index: 0;  content: '';}
.about .about-image .image-a{width: 450px; height: 400px;}
.about .about-image .image-b{width: 360px; height: 260px;}
.about .about-info{width: 700px; height: 510px;}
.about .about-info .small-logo{width: 22px; height: 22px;}
.about .about-info .texts{line-height: 40px;}
.about .about-info .more{width: 188px; height: 50px;}

/* 商品 */
.products{background: url("https://art-industry.oss-cn-hangzhou.aliyuncs.com/image/products-bg.png") top center repeat #F5F7FA; background-size: 50px 50px; }
.products:after{width: 30%; height: 100%; background: url("https://art-industry.oss-cn-hangzhou.aliyuncs.com/image/products-left-bg.jpg") top center no-repeat; background-size: auto 100%; position: absolute; left: 0; top: 0; content: '';}
.products dl{height: 480px; padding-top: 15px;}
.products dl .swiper-wrapper{height: 400px;}
.products-height{min-height: 500px;}
.product-li{width: calc((100% - 120px) / 5); height: 350px; margin-right: 30px; transition: transform .3s ease-in-out;}
.product-li:nth-child(5n){margin-right: 0;}
.product-li .image{height: 256px;}
.product-li .button{width: 220px; height: 45px; line-height: 45px; transform: scale(.5); opacity: 0; visibility: hidden;}
.product-li:hover .image img{transform: scale(1.2);}
.product-li:hover .info-title{opacity: 0; visibility: hidden;}
.product-li:hover .button{transform: scale(1); opacity: 1; visibility: visible;}

/* 优势 */
.advantage-box{height: 220px; background: url("https://anruotai-nickel.oss-cn-hangzhou.aliyuncs.com/image/advantage-bg.jpg") center no-repeat fixed; background-size: cover; position: relative;}
.advantage-box::before{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,.7); content: ''; z-index: 1;}
.advantage-box i{font-size: 50px;}

/* 领域 */
.fields_height{height: 635px;}
.fields-li{width: calc((100% - 90px) / 4); margin-right: 30px;}
.fields-li:nth-child(4n){margin-right: 0;}
.fields-li .image{height: 250px;}
.fields-li .image .info{width: calc(100% - 20px); height: calc(100% - 20px); bottom: -225px; background-color: rgba(2,96,170,.8);}
.fields-li:hover .image .info{bottom: 10px;}

/* 设备 */
.devices_height{height: 635px;}
.devices-li{width: calc((100% - 90px) / 4); margin-right: 30px;}
.devices-li:nth-child(4n){margin-right: 0;}
.devices-li .image{height: 250px;}
.devices-li .image .image-mask{background-color: rgba(2,96,170,.8); bottom: -245px;}
.devices-li .image .image-mask i{width: 45px; height: 45px;}
.devices-li:hover .image .image-mask{bottom: 0;}
.devices-li:hover span{color: var(--main-color);}

/* 新闻 */
.news_height{height: 860px;}
.news_li{width: calc((100% - 90px) / 4); margin-right: 30px;}
.news_li:nth-child(4n){margin-right: 0;}
.news_li .image{width: 340px; height: 250px;}
.news_li .image::before{width: 0; height: 0; position: absolute; background-color: rgba(0,0,0,0.38); content: '';transition: .3s; z-index: 1;}
.news_li h3:before{width: 16px; height: 16px; font-size: 16px; color: var(--main-color); display: flex; justify-content: center; align-items: center; margin-right: 8px; font-family: iconfont, serif; content: '\e918';}
.news_li p{height: 60px;}
.news_li .h2:hover,.news .href{color: var(--main-color);}
.news_li:hover .image::before{width: 100%; height: 100%;}
.news_li:hover .image img{transform: scale(1.08);}

/* 客服轮播 */
.codes-swiper{width: 326px;}
.codes-swiper .swiper{width: 290px; height: 320px;}
.codes-swiper .swiper .swiper-slide{width: 180px; height: 298px; border: #EEEEEE 1px solid; box-sizing: border-box;}
.codes-swiper .swiper .swiper-slide-active{border: var(--main-color) 2px solid; box-sizing: border-box;}
.codes-swiper .swiper .swiper-slide .image{width: 180px; height: 180px;}
.codes-swiper .swiper .swiper-slide .image .code-img{opacity: 0; visibility: hidden;}
.codes-swiper .swiper .swiper-slide .image .code-img.show{ opacity: 1; visibility: visible;}
.codes-swiper .swiper .swiper-slide i{right: 8px; top: 5px;}
.codes-swiper  .swiper-pagination{height: 6px; bottom: 0;}
.codes-swiper  .swiper-pagination-bullet{width: 6px; height: 6px; border-radius: 20px; background-color: rgba(255,255,255,.28); margin: 0 3px;}
.codes-swiper .swiper-pagination-bullet-active { background-color: var(--main-color); }

/* 首页联系 */
.home-contact{height: 420px;}
.home-contact .left{width: 1074px; border-radius: 6px 0 0 6px;}
.home-contact .left dt{height: 60px;}
.home-contact .left dd{height: 350px;}
.home-contact .left dd ul{height: 300px;}
.home-contact .left dd ul li{width: 358px; height: 150px; padding: 22px;}
.home-contact .left dd ul li:nth-child(3n){border-right: 0;}
.home-contact .left dd ul li .image{width: 80px; height: 80px;}
.home-contact .left dd ul li .info .code-i{width: 25px; height: 25px; top: 20px; right: 20px;}
.home-contact .left dd ul li .info .code-i i{width: 25px; height: 25px;}
.home-contact .left dd ul li .info .code-i .code-image{width: 150px; height: 150px; left: 50%; transform: translateX(-50%); bottom: calc(100% + 8px); opacity: 0; visibility: hidden;}
.home-contact .left dd ul li:nth-child(-n+3) .info .code-i .code-image {top: 30px;bottom: 0;}
.home-contact .left dd ul li:nth-child(3n) .info .code-i .code-image{right: 0; transform: translateX(calc(-100% + 18px));}
.home-contact .left dd ul li .info .code-i:hover .code-image{opacity: 1; visibility: visible;}
.home-contact .left dd .swiper-pagination{bottom: 18px;}
.home-contact .left dd .swiper-pagination-bullet{background-color: rgba(0,0,0,.58);}
.home-contact .left dd .swiper-pagination-bullet-active { background-color: var(--main-color); }
.home-contact .codes-swiper{border-radius: 0 6px 6px 0;}
.home-contact .codes-swiper .swiper .swiper-slide,.home-contact .codes-swiper .swiper .swiper-slide-active{border-color: #FFF;}
.home-contact .swiper-pagination-bullet{background-color: rgba(255,255,255,.78);}
.home-contact .swiper-pagination-bullet-active { background-color: #FFFFFF; }

/* 联系 */
.contact-bg{background: url("https://anruotai-metal.oss-cn-hangzhou.aliyuncs.com/image/map-bg.jpg") center center / cover no-repeat scroll;}
.contact{height: 420px;}
.contact .map{width: 1044px;}

/* 文章 */
.article,.article *{font-size: 16px; line-height: 36px;}
.article img{max-width: 100%; margin-top: 5px; margin-bottom: 5px;}
.article table {border-collapse: collapse; width: 100%; margin: 10px 0; background-color: #FFFFFF;}
.article table td, .article table th {border: 1px solid #ddd; padding: 8px; line-height: 1.8;text-align: center;vertical-align: middle;}
.article table tr:nth-child(1) {background-color: #EEEEEE; font-weight: bold;}

/* 产品 */
.product{margin-top: 150px;}
.product .product-top .image{width: 500px; height: 608px;}
.product .product-top .image .product-swiper{width: 500px; height: 500px; border: #CCCCCC 2px solid; box-sizing: border-box; margin: 0;}
.product .product-top .image .product-swiper .icon{width: 40px; height: 40px; padding: 0 0 0 3px; bottom: -40px; right: 0; background-color: rgba(0,0,0,.58); border-radius: 10px 0 0 0; visibility: hidden; opacity: 0;}
.product .product-top .image .product-swiper .swiper-button-prev,.product .product-top .image .product-swiper .swiper-button-next{width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; z-index: 1; background-color: rgba(0,0,0,.58); opacity: 0; visibility: hidden;}
.product .product-top .image .product-swiper .swiper-button-prev{left: 0;}
.product .product-top .image .product-swiper .swiper-button-next{right: 0;}
.product .product-top .image .product-swiper .swiper-button-prev:after,.product .product-top .image .product-swiper .swiper-button-next:after{font-size: 14px; color: #FFFFFF; font-family:iconfont;}
.product .product-top .image .product-swiper .swiper-button-prev:after{content: '\e9de'}
.product .product-top .image .product-swiper .swiper-button-next:after{content: '\e9dd'}
.product .product-top .image .product-swiper .swiper-disabled{cursor: not-allowed;}
.product .product-top .image .product-swiper .swiper-disabled:after{color: #999999;}
.product .product-top .image .product-swiper:hover .swiper-button-prev{visibility: visible; opacity: 1; left: 10px;}
.product .product-top .image .product-swiper:hover .swiper-button-next{visibility: visible; opacity: 1; right: 10px;}
.product .product-top .image .product-swiper:hover .icon{visibility: visible; opacity: 1; bottom: 0;}
.product .product-top .image .product-thumbs{width: 500px; height: 88px; margin: 0;}
.product .product-top .image .product-thumbs .swiper-slide{width: 88px; height: 88px; margin-right: 15px; position: relative;}
.product .product-top .image .product-thumbs .swiper-slide:after{width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: #CCCCCC 2px solid; box-sizing: border-box; content: ''; cursor: pointer;}
.product .product-top .image .product-thumbs .swiper-slide:last-child{margin-right: 0;}
.product .product-top .image .product-thumbs .swiper-slide-thumb-active:after{width: 100%; height: 100%; position: absolute; left: 0; top: 0; border: var(--main-color) 2px solid; box-sizing: border-box; content: '';}
.product .product-top .info{width: 870px;}
.product .product-top .info dt{height: 50px;}
.product .product-top .info dd{height: 500px;}
.product .product-top .info dd ul{border-bottom: 0;}
.product .product-top .info dd ul li{line-height: 45px;}
.product .product-top .info dd ul li:nth-child(4n){border-right: 0;}
.product .product-top .info dd ul li span{width: 80px;}

/* 新闻 */
.new{margin-top: 150px;}
.new .new-detailed{width: 980px;}
.new .new-detailed h2{font-size: 26px; line-height: 40px;}
.new .new-detailed h3 p:not(:last-child){margin-right: 40px;position: relative;}
.new .new-detailed h3 p:not(:last-child):after{width: 1px; height: 12px; background-color: #CCCCCC; position: absolute; right: -20px; top: 5px; content: '';}
.new .new-recommend{width: 390px; padding: 0 20px 10px 20px;}
.new .new-recommend h2{line-height: 60px;}
.new .new-recommend ul li{height: 50px;}
.new .new-recommend ul li:not(:last-child){border-bottom: #EEEEEE 1px dashed;}
.new .new-recommend ul li i {width: 20px;height: 20px; margin-right: 10px; background: #F5F7Fa;border-radius: 50%;display: flex;justify-content: center;align-items: center;font-size: 12px;flex-shrink: 0; color: #333333;}
.new .new-recommend ul li:first-child i {background: #E21818;color: #FFFFFF;}
.new .new-recommend ul li:nth-child(2) i {background: #FF6C38;color: #FFFFFF;}
.new .new-recommend ul li:nth-child(3) i {background: #FCAC06;color: #FFFFFF;}
.new .new-recommend ul li a:hover {color: var(--main-color); text-decoration: underline;}

/* 搜索 */
.search{margin-top: 150px;}
.search .form{height: 60px; margin-top: 30px;}
.search .form button{width: 50px; border: 0; background-color: transparent; font-size: 26px;}
.search .form button:hover{color: var(--main-color);}
.search .form input::-webkit-input-placeholder{color: #999999;}
.search .form i{width: 60px; height: 100%; font-size: 20px;}
.search .form i:hover{color: #000000;}
.search .search-detailed{width: 980px; padding: 0 30px 30px 30px;}
.search .search-detailed li a{height: 120px;}
.search .search-detailed li .image{width: 120px;}
.search .search-detailed li .image i{width: 50px; height: 50px; background-color: rgba(0,0,0,.8); transform: translateY(100px); opacity: 0;}
.search .search-detailed li .info .describe{height: 60px; }
.search .search-detailed li a:hover h2{color: var(--main-color);}
.search .search-detailed li a:hover .image i{ transform: translateY(0); opacity: 1;}
.search .search-recommend{width: 390px; padding: 0 20px 10px 20px;}
.search .search-recommend h2{line-height: 60px;}
.search .search-recommend ul li:not(:last-child){border-bottom: #EEEEEE 1px dashed;}
.search .search-recommend ul li .image{width: 68px; height: 68px;}
.search .search-recommend ul li:hover h3{color: var(--main-color);}