@charset "utf-8";
/*===========================commen=============================*/
* {padding: 0;margin: 0;font-style:normal;}
body{ font-size:100%;line-height:1.1; width:100%; position:relative; background:none;font-family: arial, "微软雅黑"; overflow-x:hidden;color: #707070;}
img{ max-width:100%;max-height:100%;}
h4, .h4, h5, .h5, h6, .h6,h1, .h1, h2, .h2, h3, .h3,p{ margin:0;}
:focus { outline:none !important;z-index: 10000 }
input::-moz-focus-inner,
button::-moz-focus-inner {border: 0;}
a{ text-decoration:none; color:inherit;}
a:hover {text-decoration:none;}
li,ol{ list-style:none;}
.fl{ float:left;}
.fr{ float:right;}

@-webkit-keyframes pulse-border{0%{-webkit-transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);opacity:1}
100%{-webkit-transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);opacity:0}
}
@keyframes pulse-border{0%{-webkit-transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1);opacity:1}
100%{-webkit-transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);transform:translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);opacity:0}
}

/*===========================header=============================*/
.header {width: 100%;transition: .5s;  height: 100px;}
.header .logo { display: table; text-align: left; max-width: 176px;padding: 0;}
.header .logo a { display: table-cell; vertical-align: middle; height: 100px; width: 100%;}
.nav{ float:left;}
.nav>ul>li{ float:left;position:relative;}
.nav>ul>li h3{ color:#000; font-size:15px; padding:0 20px; line-height:100px; margin:0; position:relative;}
.nav .sub{border-top: #e0382f 1px solid;display: none;position: absolute;z-index: 99999;background: #fff}
.nav .sub a{font-size: 14px;line-height: 40px;height: 40px;display: block;padding: 0 20px;}
.nav .sub a:hover {color: #fff;background: #e0382f;}
.header .top_email{height: 100px;display: flex;flex-direction: row;justify-content: center;align-items: center;margin-left: 20px;}

.nav li:nth-child(3) .sub{width: 138px;left:-19px}
.nav li:nth-child(4) .sub{width: 125px;left:-12.5px}
.nav li:nth-child(6) .sub{width: 100%;}
.nav li:nth-child(8) .sub{width: 125px;left:-12.5px}
.nav li:nth-child(9) .sub{width: 125px;left:-12.5px}


/*==============================手机头部================================*/

/*导航按钮开始*/
.m_bnt_nav{ width: 30px;height:70px;text-align: center;margin-right: 15px;transition:.5s;-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;}
.m_bnt_nav .point{display: inline-block;width: 30px;height: 30px; position: relative;margin-top: 20px;}
.m_bnt_nav .navbtn{position: absolute;top: 12px;left: 0;display: inline-block;width: 30px;height: 3px;-webkit-transition: all .3s ease-out 0s;-moz-transition: all .3s ease-out 0s;-ms-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;background: #d71e08;}
.m_bnt_nav .navbtn::after,
.m_bnt_nav .navbtn::before{position: absolute; left: 0;display: inline-block;width: 26px;height: 3px;content: '';-webkit-transition: all .3s ease-out 0s;-moz-transition: all .3s ease-out 0s;-ms-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;background: #d71e08;}
.m_bnt_nav .navbtn::after{top: -8px;}
.m_bnt_nav .navbtn::before{top: 8px;}
.m_bnt_nav .point.on .navbtn{background: transparent !important;}
.m_bnt_nav .point.on .navbtn::after{-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);top: 0px;}
.m_bnt_nav .point.on .navbtn::before{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);top: 0px;}
/*导航按钮结束*/

.m_header { width: 100%; height: 70px;line-height:70px;position: relative;z-index: 3;}
.m_header .m_logo{ width:150px;}
.m_header .m_logo a{ display:table-cell; vertical-align:middle; height:70px;}
.m_header:hover #nav li h3,.m_header.xg #nav li h3{ color:#333;}
.m_header:hover .top_search .iconfont,.m_header.xg .top_search .iconfont,.m_header:hover .top_email .iconfont,.m_header.xg .top_email .iconfont{ color:#d71e08;; }
.m_header:hover .logo_blue,.m_header.xg .logo_blue { display:block;}
.m_header:hover .logo_white,.m_header.xg .logo_white { display:none;}
.m_header:hover .m_bnt_nav .navbtn,.m_header:hover .m_bnt_nav .navbtn::after,.m_header:hover .m_bnt_nav .navbtn::before{background: #d71e08;;}

.m_nav{width:100%;height:100vh;background:#fff;display:none;padding:15px;overflow:auto;}
.m_nav_list{text-align:right;background:#f6f6f6}
.m_nav li{display:block;transition:.5s}
.m_nav li .a{display:block;text-align:left;position:relative;z-index:0;padding:0 20px;line-height:50px;white-space:nowrap}
.m_nav li .a h3{font-family:lato_b;display:inline-block;font-size:14px;color:#777;text-transform:uppercase}
.m_nav li:hover .a h3{color:#d71e08;}
.m_nav li .a i{font-size:13px;color:#83ab97}
.m_nav .title .a i{opacity:1;display:inline-block;font-family:simsun;float:right;transition:.3s}
.m_nav li.on .a:before{color:#cf574d}
.m_nav .title .list span .sub{border-bottom:0}
.m_nav .title .sub a{height:40px;line-height:40px;font-size:13px;color:#777;font-weight:300}
.m_nav .title .sub a:hover{color:#d71e08;}
.m_nav_list{flex-direction:column;justify-content:flex-start}
.m_nav>ul>li{border-bottom:1px solid #eee;width:100%}
.m_nav li.on.title .a i{transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}
.m_nav::-webkit-scrollbar{display:none}
.m_nav .title .list{display:none;position:relative;width:100%;z-index:9;left:0;margin-left:0;background:#f2f2f2;padding:10px 0;border:0}
.m_nav .title .list a{display:block;font-size:1rem;color:#777;text-align:left;line-height:40px;height:40px;border:0;font-weight:300;padding: 0 2rem;}


/*===========================banner=============================*/
.banner{position: relative;}
.banner .banner-btn{position: absolute;top: 50%;width: 100%;height: 44px;margin-top: -22px;z-index: 10;cursor: pointer;}
.banner .banner-btn .banner-prev,.banner .banner-btn .banner-next{transition: 1s all;padding: 20px 10px;font-size: 30px;color: #fff;background: rgba(0, 0, 0, 0.5);cursor: pointer;font-family: "宋体";display: block;opacity: 0.5;}
.banner .dots{position: absolute;text-align: center; z-index: 1;}
.banner .dots span{width: 30px;height: 5px;margin: 0 5px;cursor: pointer;background: #fff;opacity: 0.8;border-radius: 0}
.banner .dots span.swiper-pagination-bullet-active{background: #000}


/*===========================main=============================*/
.main{position: relative}
.ititle{margin: 4rem 0;}
.ititle span{font-size: 40px;color: #df382f;font-weight: bold;}
.ititle p{font-size: 16px;margin-top: 1.5rem;}
.shadow{position: fixed;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);z-index: 3;top: 0;display:none;}
/*走进涂瑞*/
.index-about{width: 100%;}
.index-about .cbox{background: url(../images/m8.png) center no-repeat;background-size: cover;}
.index-about .cbox .vbox{position: relative;width: 44%;}
.index-about .cbox .vbox .video-btn{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.2);}
.index-about .cbox .vbox .video-btn:after{content:"";position:absolute;z-index:0;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);display:block;width:60px;height:60px;background:#fff;border-radius:50%;animation:pulse-border 1.5s ease-out infinite}
.index-about .cbox .vbox .video-btn img{position:absolute;z-index:2;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);display:block;cursor: pointer;}
.index-about .cbox .vbox .video-box{width:50%;position:fixed;z-index:4;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);border:5px solid#df382f;background:#fff;display: none;}
.index-about .cbox .vbox .video-box .video-close{width:20px;height:20px;text-align: center;line-height: 18px;color: #df382f;border:1px solid #df382f;border-radius: 50%;float: right;margin: 5px;cursor: pointer;}
.index-about .cbox .tbox{width:56%;padding:5%;}
.index-about .cbox .tbox .t{width: 15%;height:100%;}
.index-about .cbox .tbox .t .img{display: table-cell;vertical-align: middle;height:100%;}
.index-about .cbox .tbox .t img{width: 72px;}
.index-about .cbox .tbox .c{width: 65%;color: #fff;}
.index-about .cbox .tbox .c .tit{font-size: 34px;font-weight: bold;}
.index-about .cbox .tbox .c .line em{width: 45px; height: 2px;background: #df382f;display: block;margin: 1.5rem 0 3rem 0}
.index-about .cbox .tbox .c .desc p{font-size: 16px;line-height: 1.8;text-indent: 2em;}
.index-about .cbox .tbox .c .data {margin-top: 2rem}
.index-about .cbox .tbox .c .data .item span{font-size: 30px;color: #df382f;font-weight: bold}
.index-about .cbox .tbox .c .data .item p{font-size: 12px; display: inline-block;}

/*产业*/
.index-industry{}
.index-industry .cbox .item {margin-bottom: 3rem;background: #2abbb0;}
.index-industry .cbox .item .banner{width: 58%;}
.index-industry .cbox .item .banner .tbox{position:absolute;z-index:5;left:50%;top:50%;transform:translateX(-50%) translateY(-50%);color: #fff;}

.index-industry .cbox .item .tbox{display: inline-block;}
.index-industry .cbox .item .tbox .tit{font-size: 46px;;font-weight: bold;margin-bottom: 2rem}
.index-industry .cbox .item .tbox .line em{width: 100%;height: 7px;background: #fff;display: block;margin-bottom: 2rem}

.index-industry .cbox .item .txt{width: 42%;color: #fff;padding: 3%;}
.index-industry .cbox .item .txt .con{width: 60%}
.index-industry .cbox .item .txt .con .desc{font-size: 16px;line-height: 2;margin-bottom: 2rem}
.index-industry .cbox .item .txt .con .more{display: inline-flex}
.index-industry .cbox .item .txt .con .more a{background-color: rgb(255, 255, 255);border-radius: 25px;color: #2abbb0;font-size: 18px;padding: 1rem 3rem}

.index-industry .cbox .item:nth-child(2){background: #4399e9}
.index-industry .cbox .item:nth-child(2) .txt .con .more a{color:#4399e9 }
.index-industry .cbox .item:nth-child(2) .txt .con{float: right}

.index-industry .cbox .item:nth-child(3){background: #0993a9}
.index-industry .cbox .item:nth-child(3) .txt .con .more a{color:#0993a9 }

/*案例*/
.index-case{}
.index-case .cbox{background: url(../images/m4.jpg) no-repeat center center;background-size:cover;padding: 5renm}
.index-case .cbox .bg{background-color: rgba(0, 0, 0, 0.5);padding: 7rem 0}
.index-case .cbox .item{padding: 10px;overflow: hidden;background: #fff;}
.index-case .cbox .item .tit{color: #464646;line-height: 35px;font-weight: bold;margin:0.5rem 0;  white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}
.index-case .cbox .item .desc{color: #909090;text-align: justify;font-size: 14px;line-height: 26px;}
.index-case .cbox .more{width:143px;height:39px;background: #fff;color: #e0382f;display: block;margin:5rem auto 0;line-height: 39px;text-align: center;font-weight: bold;border-radius: 39px}

/*底部*/
.footer{padding-top: 3rem;margin-top: 3rem;border-top:9px solid #e0382f }
.footer .left p{font-size: 14px;line-height: 2;color: #000;}
.footer .left .more{width: 107px;height: 37px;line-height: 37px;text-align: center;background: #ba1c21;color:#fff;font-size: 16px;border-radius: 5px;display: block;margin-top: 10px;}
.footer .right .font a{padding-bottom: 10px; line-height: 21px;font-size: 16px;color: #000;display: block}
.footer .right .list a{padding: 10px 0;line-height: 16px; font-size: 14px;display: block}
.footer .copyright{background: #e8e8e8;margin-top: 3rem;line-height: 40px;font-size: 14px;color: #000}

/*===========================内页=============================*/
.nbanner{height: 420px;overflow: hidden;background-repeat: no-repeat;background-position: center center;background-size: auto auto;}
.position{border-bottom: 1px solid #d6d6d6;}
.position h3{padding:1.5rem 0;font-size: 14px;color: #666;}
.subnav{padding: 3rem 0;text-align: center}
.subnav ul li{display: inline-block;margin:0 1rem}
.subnav ul li a{width:140px;line-height: 42px;text-align: center;font-size: 15px;border:1px solid #d6d6d6; border-radius: 20px;display: block}
.subnav ul li a:hover{background: #e0382f;color: #fff;}

.content .tit{line-height: 40px;color: #1e1e1e;font-size: 30px;text-align: center;padding:0 0 1.5rem 0;border-bottom:1px solid #f0f0f0;margin-bottom: 1.5rem}
.content .text{font-size: 15px;line-height: 2em; color: #707070;}
.content .desc{margin: 1rem 0;padding: 0.5rem 1rem;border:1px solid #e4e4e4;background: #fcfbfd;color: #999;font-size: 14px;line-height: 26px;}
.content .desc i{color: #969696;}
.content .prev{padding-top:2rem;margin-top:1rem;border-top: 1px solid #d6d6d6;font-size: 14px;color: #969696;}
.content .prev a{color: #656565;}
.content .prev a:hover{color: #d61e0a}

.content table{width: 100%}
.content table td{width: 50%;padding: 20px 0;}
.content table td img{margin-bottom: 10px;}

.content .map{min-height: 500px;margin-top: 20px}
/*case*/
.clist .item{margin-bottom: 30px}
.clist .item .text{background: #f9f9f9;padding: 10px}
.clist .item .tit{margin: 5px 0 10px;line-height: 20px}
.clist .item .tit p{font-size: 14px;color: #d61e0a;}
.clist .item .more{color: #d61e0a;background: #fcfcfc;line-height: 26px;font-size: 12px;width: 86px;line-height: 28px;display: block;text-align: center; border: 1px solid #f0f0f0;}
/*news*/
.alist .item{padding: 15px 0;border-bottom:1px solid #f0f0f0;}
.alist .item .tit{margin: 5px 0 10px;}
.alist .item .tit p{font-size: 16px;color: #d61e0a;font-weight: bold;}
.alist .item .tit d{color: #969696;font-size: 12px;line-height: 16px;}
.alist .item .tit d i{color: #c8c8c8;}
.alist .item .tit d i img{width: 14px; vertical-align: top;margin-right: 2px;}
.alist .item .desc{color: #666;font-size: 14px;line-height: 26px;}
.alist .item .desc i{color: #969696;}
.alist .item .more{color: #d61e0a;background: #fcfcfc;border:1px solid #f0f0f0;line-height: 26px;font-size: 12px;width: 86px;line-height: 28px;display: block;text-align: center;}

/*pro*/
.content .tit2{margin-top:4rem;color: #d61e0a;font-weight: bold;font-size: 40px;}
.content .line{padding: 1rem 0 3rem 0}
.content .line em{background: #d61e0a;width: 120px;height: 5px;display: inline-block;}
.content .txt{ font-size: 16px;line-height: 2;color: #000;}

.content .pro-cate{margin: 4rem 0}
.content .pro-cate li{position:relative;overflow:hidden;}
.content .pro-cate li a{display: inline-block;}
.content .pro-cate li .img{width:100%;transition:.3s}
.content .pro-cate li .img img{transition:.7s;}
.content .pro-cate li .txt2{position:absolute;width: calc(100% - 30px);height:100%;background-color: rgba(0, 0, 0, 0.5);opacity: 1;transition:.7s;z-index:1;color: #fff;opacity: 0;}
.content .pro-cate li:hover .txt2{opacity: 1;}
.content .pro-cate li .txt2 .tab{display: table;width: 100%;height: 100%;}
.content .pro-cate li .txt2 .tab .tab_cel{display: table-cell;width: 100%;height: 100%;text-align: center;vertical-align: middle}
.content .pro-cate li .txt2 h5{color: #fff;font-size: 25px;}
.content .pro-cate li .txt2 em{display: inline-block;width: 50px;height: 5px;background: #fff;margin-top: 1rem}

.plist .item{margin:15px 0}
.plist .item .box{display: block;line-height: normal;overflow: hidden;}
.plist .item .box mark{position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;background:rgba(235,97,35,.2);z-index:20;opacity:0;transform:skewX(45deg);visibility:hidden;transition:360ms}
.plist .item .box mark b{display:block;width:46px;height:46px;position:absolute;left:50%;top:50%;margin-left:-23px;margin-top:-23px;z-index:30}
.plist .item .box mark b:before{content:"";width:100%;height:1px;background:#eb6123;position:absolute;left:0;top:23px;transform:translateX(-200px);-webkit-transform:translateX(-200px);-moz-transform:translateX(-200px)}
.plist .item .box mark b:after{content:"";width:1px;height:100%;background:#eb6123;position:absolute;left:23px;top:0;transform:translateY(-200px);-webkit-transform:translateY(-200px);-moz-transform:translateY(-200px)}
.plist .item .box mark:before{content:"";width:100%;height:0%;border-left:3px solid #eb6123;border-right:3px solid #eb6123;box-sizing:border-box;position:absolute;left:0;top:0;transition:320ms}
.plist .item mark:after{content:"";width:0%;height:100%;border-top:3px solid #eb6123;border-bottom:3px solid #eb6123;box-sizing:border-box;position:absolute;left:0;top:0;transition:320ms}
.plist .item .box .pic{position: relative;max-height: 260px;overflow: hidden;}
.plist .item .box img{display:block;transition:424ms linear}
.plist .item .box .text{display:block;color:#5d5d5d;font-size:14px;line-height:normal;margin-top:14px;transition:350ms}
.plist .item:hover .box mark{opacity:1;transform:skewX(0);visibility:visible}
.plist .item:hover .box mark:before{height:100%;transition:330ms .2s}
.plist .item:hover .box mark:after{width:100%;transition:330ms .2s}
.plist .item:hover .box img{transform:scale(1.05);-webkit-transform:scale(1.05);-moz-transform:scale(1.05)}
.plist .item:hover .box mark b:before{transition:355ms 180ms;transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0)}
.plist .item:hover .box mark b:after{transition:355ms 240ms;transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0)}
.plist .item:hover .box .text{color:#eb6123}

/*产品内容页*/
.content .view{max-width:600px;border: 1px solid #e4e4e4;}
.content .view .swiper-slide{height:400px;max-width:600px;overflow:hidden;text-align:center;}
.content .view .swiper-slide img{eft: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);position: absolute;}
.content .view .arrow-left{background:url(../images/m11.png) no-repeat left center;position:absolute;left:10px;width:28px;height:300px;z-index:10;display:none}
.content .view .arrow-right{background:url(../images/m12.png) no-repeat right center;position:absolute;right:10px;width:28px;height:300px;z-index:10;display:none}
.content .preview{position:relative;padding: 2rem;border: 1px solid #e4e4e4;border-top: 0}
.content .preview .swiper-slide{width:126px;height:106px;margin:0 3px;overflow:hidden;cursor:pointer;}
.content .preview .swiper-slide img{display:inline-block;height:100%}
.content .preview .active-nav{border:2px solid #9a9b9b}
.content .preview .arrow-left{background:#a2a2a2 url(../images/m9.png) no-repeat center;position:absolute;left:0px;top:2rem;width:28px;height:calc(100% - 4rem);z-index:10}
.content .preview .arrow-right{background:#a2a2a2 url(../images/m10.png) no-repeat center;position:absolute;right:0px;top:2rem;width:28px;height:calc(100% - 4rem);z-index:10}

.content .tbox .ct{text-align: right;display: block;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;line-height: 31px;color: #979797;font-size: 14px;}
.content .tbox .nt{font-weight: bold;white-space: normal;text-align: left;line-height: 31px;color: #333333;font-size: 24px;}
.content .tbox .it{line-height: 31px;color: #666;font-size: 14px;}
.content .tbox .item{padding: 10px 0;border-bottom:1px dashed #f0f0f0}

.content .ptext{margin:2rem 0 0;}
.content .ptext h5{height:45px;line-height:45px;font-size: 16px;text-align: center;display:inline-block;padding: 0 25px;color: #fff;background-color: #d61e0a;}
.content .ptext .cbox{padding: 20px;border:1px solid #f0f0f0}

/*留言*/
.content form{margin:4rem auto;max-width: 500px;}
.content form label{font-weight: normal;font-size: 14px}
.content form .btn{padding: 10px 30px;}

/*分页*/
.pages{margin-top:3rem;}
.pages a{font-size: 14px;margin-right: 5px;line-height: 30px;display: inline-block}
.pages a{height: 30px;width: 30px;color: #666;text-align: center;background: #f2f2f2;}
.pages a.page-num-current,.pages a:hover{background: #d61e0a;color: #fff;}
.pages a.page-item{width: unset;padding: 0 20px;}