@import "common.css";

/* 首页轮播 */
.banner{width: 100%; height: 800px; margin: 0 auto;}
.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-mask{width: 100%; height: 100%; background-color:rgba(0,80,150,.68); z-index: 2;}*/
.banner .video-text{width: 100%; z-index: 3; left: 50%; transform: translateX(-50%);}
.banner .video-text p{font-size: 28px;}
.banner .video-text b{font-size: 68px;}
.banner .video-text .customized-buttons{width: 180px;font-size: 18px; line-height: 50px;border-radius: 6px; display: inline-block; color: #FFFFFF; border: #FFFFFF 2px solid;}
.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{padding: 60px 158px;}
.statistics li h2{font-size: 45px; line-height: 45px;}
.statistics li h3{font-size: 18px;}

/* 介绍 */
.about .about-image{width: 500px; height: 400px;}
.about .about-image .bg{width: 500px; height: 479px; top: -40px; animation:borderFrames 10s linear 0s infinite normal both running;}
.about .about-image .image-a{width: 380px; height: 300px; top: 0; left: 0;}
.about .about-image .image-b{width: 200px; height: 150px; bottom: 0; right: 0;}
.about .about-image .span-a{width: 110px; height: 120px; top: 0; right: 0;}
.about .about-image .span-b{width: 200px; height: 90px; bottom: 0; left: 90px;}
.about .about-image .address{left: 15px; bottom: 10px;}
.about .about-info{width: calc(100% - 600px);}
.about .about-info .module-title{width: 100%;align-items: flex-start;}
.about .about-info .module-title h2{font-size: 30px;}
.about .about-info .module-title span{font-size: 80px; top: -25px;}
.about .about-info .texts{line-height: 36px;}
.about .about-info .more{width: 188px; height: 50px;}

/* 优势 */
.advantage{width: 100%; padding: 60px 0; box-sizing: border-box; background: url("https://anruotai-metal.oss-cn-hangzhou.aliyuncs.com/image/advantage-bg.jpg") center center / cover no-repeat scroll;}
.advantage ul li{width: 326px;}
.advantage ul li i{font-size: 50px;}
/*.advantage ul li .icon-box span{width: 100%; height: 100%; border-radius: 50%; border: #FFFFFF 3px dashed; box-sizing: border-box;}*/
/*.advantage ul li p{line-height: 30px; text-align: center;white-space: pre-line;}*/
.advantage ul li:hover i{animation: flipOnce 0.8s ease forwards;}

/* 商品 */
.products_height{min-height: 795px;}
.products_li{width: calc((100% - 90px) / 4); margin-right: 30px;}
.products_li:nth-child(4n){margin-right: 0;}
.products_li .image{height:330px;}
.products_li .image:after{width: 100%; height: 0; background-color: var(--main-color); opacity: 0.8; position: absolute; left: 0; bottom: 0; content: '';transition: all .3s ease;}
.products_li .image .description h2{height: 58px; font-size: 58px; line-height: 58px; width: 270px; left: -100px; top: 40px;}
.products_li .image .description h2:after{width: 55px; height: 1px; background-color: rgba(255,255,255,0.8); position: absolute; left: -60px; content: '';}
.products_li .image .description p{width: 270px; color: rgba(255,255,255,0.88); opacity: 0; visibility: hidden;}
.products_li:hover .image:after{height: 100%;}
.products_li:hover .image img{transform: scale(1.08);}
.products_li:hover .description h2{left: 51px;}
.products_li:hover .description p{bottom: 50px; opacity: 1; visibility: visible;}
.products_li:hover h3{color: var(--main-color);}

/* 领域 */
.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:before{width: 46px; height: 40px; position: absolute; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #FFFFFF; background-color: var(--main-color); right: 20px; bottom: -40px; content: '＋';transition:all ease-out .3s;z-index: 2;}
.fields_li .image:after{width: 100%; height: 100%; box-sizing: border-box; border: rgba(255,255,255,0.5) 1px solid; position: absolute; content: '';transition:all ease-out .3s;z-index: 1; opacity: 0; visibility: hidden;}
.fields_li:hover .image img{transform: scale(1.08); translate(0,0,0)}
.fields_li:hover .image:before{bottom: 0;}
.fields_li:hover .image:after{width: 300px; height: 220px; opacity: 1; visibility: visible;}
.fields_li:hover h3{color: var(--main-color);}

/* 设备 */
.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::after{width: 0; height: 0; position: absolute; background-color: rgba(0,0,0,0.38); content: '';transition: .3s;}
.devices_li i{width: 50px; height: 50px; opacity: 0;}
.devices_li:hover .image i{opacity: 1;}
.devices_li:hover .image::after{width: 100%; height: 100%;}
.devices_li:hover .image img{transform: scale(1.08);}
.devices_li:hover h3{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: 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);}