@import "common.css";

/* 首页轮播 */
.banner{width: 100%; height: 800px; margin-top: 90px;}
.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::after{width: 100%; height: 189px; background: url("https://anruotai-lnglian.oss-cn-hangzhou.aliyuncs.com/image/banner-mask.png") top center no-repeat; background-size: 100% 100%; position: absolute; bottom: -2px; 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: -70px;}
.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: #8E6A44; opacity: 0; position: absolute; content: ''; transition: all .3s ease;}
.banner .video-text .customized-buttons:hover:before{width: 100%; opacity: 1;}
.banner .message{bottom: 60px; 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-lnglian.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,.58); 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: 580px; height: 500px;}
.about .about-image .image-a{width: 500px; height: 500px;}
.about .about-image .image-b{width: 200px; height: 200px; bottom: 30px; border: #FFFFFF 5px solid;}
.about .working-area{width: 180px; height: 180px; top: 20px; left: -20px;}
.about .working-area b{font-size: 38px; line-height: 38px;}
.about .about-info{width: 750px;}
.about .about-info .small-logo{width: 22px; height: 22px;}
.about .about-info .texts{line-height: 36px;}
.about .about-info .more{width: 188px; height: 50px;}

/* 商品 */
.product-li{width: calc((100% - 90px) / 4); margin-right: 30px;}
.product-li:nth-child(4n){margin-right: 0;}
.product-li .image{height: 328px;}
.product-li .image::after{width: 100%; height: 100%; position: absolute; border: #FFFFFF 1px solid; box-sizing: border-box; background-color: rgba(0,0,0,.28); z-index: 1; opacity: 0; visibility: hidden; content: '';  transition: all .3s  ease;}
.product-li .image i{width: 50px; height: 50px; background-color: var(--main-color); transform: translateY(158px); opacity: 0; visibility: hidden;}
.product-li .info{padding: 30px 20px;}
.product-li .button{width: 100%; height: 38px; line-height: 38px; border-color: #181818;}
.product-li:hover .image img{transform: scale(1.2);}
.product-li:hover .image::after{width: 308px; height: 308px; opacity: 1; visibility: visible;}
.product-li:hover .image i{transform: translateY(0); opacity: 1; visibility: visible;}
.product-li:hover .button{background-color: var(--main-color); border-color: var(--main-color); color: #FFFFFF;}

/* 优势 */
.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(189,155,120,.8); 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; border-radius: 6px 6px 0 0;}
.fields-li .image::after{width: 100%; height: 40px; background: url("https://anruotai-lnglian.oss-cn-hangzhou.aliyuncs.com/image/field-bg.png") left  bottom no-repeat; background-size: auto 40px; position: absolute; left: 0; bottom: 0; z-index: 2; content: '';}
.fields-li .image::before{width: 100%; height: 0; position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,.28); content: ''; z-index: 1;transition: all .3s  ease;}
.fields-li .info{border-radius: 0 0 6px 6px; padding: 0 20px 20px 20px;}
.fields-li .label{width: 45px; height: 45px; border-radius: 10px; box-shadow: 0 0 0 2px #FFFFFF; right: 25px; bottom: 50px; transform: rotate(45deg); opacity: 0; visibility: hidden;}
.fields-li .label i{ transform: rotate(-45deg); padding: 1px 3px 0 0;}
.fields-li:hover .image::before{height: 100%;}
.fields-li:hover .label{bottom: 75px; opacity: 1; visibility: visible;}

/* 设备 */
.devices_height{height: 635px;}
.devices-li{width: calc((100% - 90px) / 4); height: 450px; margin-right: 30px;}
.devices-li:nth-child(4n){margin-right: 0;}
.devices-li::after{width: 50px; height: 50px; line-height: 48px; text-align: center; background-color: var(--main-color); border: var(--main-color) 1px solid; box-sizing: border-box; border-radius: 50%; position: absolute; bottom: 0; z-index: 3; font-size: 20px; color: #FFFFFF; font-family: remixicon,serif; content: '\EA13';}
.devices-li .image{height: 250px; border-radius: 6px 6px 0 0;}
.devices-li .icon{width: 60px; height: 60px; border: #FFFFFF 3px solid; top: 198px; padding-bottom: 3px;}
.devices-li .info{height: 198px; border-radius: 0 0 6px 6px; margin-top: -22px;}
.devices-li .info::before{width: 800px; height: 500px; border-radius: 50%; position: absolute; top: 0; background-color: #FFFFFF; content: '';}
.devices-li.inner .info::before{background-color: #F5F7FA;}
.devices-li::after,.devices-li .icon,.devices-li .info::before{transition: all .3s ease-in;}
.devices-li:hover::after{background-color: #FFFFFF; color: var(--main-color);}
.devices-li:hover .icon{background-color: #FFFFFF; color: var(--main-color);}
.devices-li:hover .info::before{background-color: var(--main-color);}
.devices-li:hover .info > *{color: #FFFFFF;}

/* 新闻 */
.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,.28); 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:hover .image::before{width: 100%; height: 100%;}
.news-li:hover .image img{transform: scale(1.08);}
.news-li:hover h2{color: var(--main-color);}

/* 客服轮播 */
.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: 90px;}
.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: 90px;}
.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: 90px;}
.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);}