@import "common.css";

/* 首页轮播 */
.banner{width: 100%; height: 800px;}
.banner::before{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url("https://anruotai-group.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 span{letter-spacing: 6px; margin-top: -30px;}
.banner .video-text span::before,.banner .video-text span::after{width: 60px; height: 2px; background-color: #FFFFFF; float: left; margin-right: 10px; content: '';}
.banner .video-text span::before{float: left; margin-right: 15px;}
.banner .video-text span::after{float: right; margin-left: 10px;}
.banner .video-text b{font-size: 68px; line-height: 1.2; letter-spacing: 2px;}
.banner .video-text b:nth-child(3){font-size: 36px;}
.banner .video-text p{line-height: 40px; letter-spacing: 1px; white-space: pre;}
.banner .video-text .buttons{height: 60px;}
.banner .video-text .buttons a{width: 180px; height: 100%; line-height: 60px; color: #FFFFFF;}
.banner .video-text .buttons a:first-child{background-color: var(--main-color); }
.banner .video-text .buttons a:last-child{border: #FFFFFF 2px solid; box-sizing: border-box;}
.banner .message{bottom: 50px; z-index: 3; left: 50%; transform: translateX(-50%);}
.banner .message i{font-size: 25px;animation: jump 1.5s linear infinite;}

/* 业务 */
.business-li{width: calc((100% - 90px) / 4); height: 500px; margin-right: 30px;}
.business-li:nth-child(4n){margin-right: 0;}
.business-li .arrow{width: 64px; height: 64px;}
.business-li b{font-size: 58px; line-height: 58px;}
.business-li dt{height: 100%; opacity: 1; visibility: visible;}
.business-li dt .image{height: 200px;}
.business-li .link{height: 36px; border: #EEEEEE 1px solid;}
.business-li dd{height: 0; opacity: 0; visibility: hidden;}
.business-li dd::before{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(to top, rgba(0, 68, 158, 0.8), rgba(0, 68, 158, 0.18)); z-index: 1; content: '';}
.business-li dd .link{border-color: #FFFFFF;}
.business-li:hover dt{height: 0; opacity: 0; visibility: hidden;}
.business-li:hover dd{height: 100%; opacity: 1; visibility: visible;}
.business-li:hover img{opacity: 1;}

/* 统计 */
.statistics{height: 150px;}
.statistics.home{width: 100%;}
.statistics.inner{width: 1400px;}
.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{margin-top: 10px;}
.statistics.home li:after{visibility: hidden;}
.statistics.home li p span{font-size: 38px;}
.statistics.home li p span,.statistics.home li p em{color: #FFFFFF;}
.statistics.home li i{color: #F3F3F3;}

/* 介绍 */
.about{background: url("https://anruotai-group.oss-cn-hangzhou.aliyuncs.com/about/bg.png") top center no-repeat var(--main-color); background-size: cover;}
.about .about-info{width: 830px;}
.about .about-info .small-logo{width: 22px; height: 22px;}
.about .about-info .texts{color: rgba(255,255,255,.88); line-height: 36px;}
.about .about-info .more{width: 188px; height: 50px;}
.about .about-image{width: 500px; height: 550px;}
.about .about-image .image-a{width: 500px; height: 510px;}
.about .about-image .image-b{width: 230px; height: 230px;}
.about .about-image .image-a,.about .about-image .image-b{ border: #FFFFFF 3px solid;}

/* 服务 */
.service-li{width: calc((100% - 90px) / 4); height: 328px; margin-right: 30px;}
.service-li:nth-child(4n){margin-right: 0;}
.service-li::before{width: 100%; height: 200%; position: absolute;  background: linear-gradient(to bottom, transparent 0%, var(--main-color) 100%); left: 0; top: 0; content: '';transition: all .3s ease;}
.service-li .info{transform: translateY(128px); transition: .3s cubic-bezier(.24,.74,.58,1);}
.service-li i{width: 50px; height: 50px; padding-top: 3px;transition: .3s cubic-bezier(.24,.74,.58,1);}
.service-li:hover::before{background: rgba(0,23,60,0.58);}
.service-li:hover .info{transform: translateY(0);}

/* 联系 */
.contact-li{width: calc((100% - 90px) / 4); height: 280px; margin-right: 30px; box-shadow: 0 5px 15px 0 rgba(62, 65, 159, 0.1);}
.contact-li:nth-child(4n){margin-right: 0;}
.contact-li i{width: 85px; height: 85px; font-size: 38px; background-color: #F5F5F5; color: #687693; margin-top:25px;}
.contact-li h3{font-size: 18px;}
.contact-li p,.contact-li a{color: #687693;}
.contact-li a:hover{text-decoration: underline;}
.contact-title h3{font-size: 38px; font-weight: 700!important;}
.contact-title p{color: #687693;}
.contact-form{margin: 50px 0; box-shadow: 0 5px 15px 0 rgba(62, 65, 159, 0.1);}
.contact-form.product-form{margin: 30px 0; box-shadow: none;}
.contact-form input{width: calc((100% - 60px) / 3); height: 50px; border-color: #EBEBEB;}
.contact-form input.product-input{width: 100%;}
.contact-form textarea{height: 250px; line-height: 50px; resize: none;}
.contact-form button{color: #FFFFFF; border: none;}
.contact-form input::-webkit-input-placeholder {color: #687693;}
.contact-form input::-moz-placeholder {color: #687693;}
.contact-form input:-ms-input-placeholder {color: #687693;}
.contact-form input:-moz-placeholder {color: #687693;}
.contact-form textarea::-webkit-input-placeholder {color: #687693;}
.contact-form textarea::-moz-placeholder {color: #687693;}
.contact-form textarea:-ms-input-placeholder {color: #687693;}
.contact-form textarea:-moz-placeholder {color: #687693;}

/* 商品 */
.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-li{width: calc((100% - 90px) / 4); margin-right: 30px;}
.news-li:nth-child(4n){margin-right: 0;}
.news-li .image{height: 250px;}
.news-li .image img{margin-left: 50px;transform: scale(1.2);transition: .5s ease-in-out;}
.news-li:hover .image img{margin-left: 0}
.news-li .href:hover{color: var(--main-color); text-decoration: underline;}
.news-li .button{width: 120px; height: 45px;}
.news-li .button::before{width: 100%; height: 3px; background-color: #181818; position: absolute; left: 0; bottom: 0; transition: all .3s ease; content: '';}
.news-li .button:hover::before{height: 100%;}

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