@charset "utf-8";

/*banner*/
.banner { position: relative; background: #000; margin: 0 auto; overflow: hidden; clear: both; }
.banner .bd { position: relative; z-index: 0; }
.banner .bd li img { width: 100%; vertical-align: top; }
.banner .hd { position: absolute; bottom: 40px; width: 100%; height: 2px; cursor: pointer; z-index: 9; font-size: 0; text-align: center; display: block; }
.banner .hd li { display: inline-block; width: 12px; height: 12px; background: #fff; opacity: 0.4; border-radius: 50%; transition: all 0.5s ease; margin: 0 8px; cursor: pointer; }
.banner .hd li.on { opacity: 1; }
.banner .prev,.banner .next { width: 54px; height: 54px; cursor: pointer; margin-left: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.2); top: 46%; left: -100px; position: absolute; z-index: 9; transition: all 0.5s ease; }
.banner .prev:hover,.banner .next:hover { border-color: #fff; }
.banner .next { left: auto; right: -100px; }
.banner:hover .prev { left: 3%; }
.banner:hover .next { right: 3%; }
/*search*/
.search { height: 80px; border-bottom: 1px solid #e5e5e5; }
.search .keyword { font-size: 14px; line-height: 80px; float: left; }
.search .keyword strong { font-weight: 400; color: #666; }
.search .keyword a { color: #777; display: inline-block; font-weight: normal; transition: all 0.5s ease; }
.search .keyword a:after { content: "，"; }
.search .keyword a:last-child:after { display: none; }
.search .keyword a:hover { color: #ee0000; }
.search .keyword a:hover:after { color: #777; }
.search .search_input { float: right; width: 297px; height: 42px; background: #f3f3f3; border-radius: 5px; margin-top: 20px; }
.search .search_input input[type="text"] { background: none; border: none; outline: none; display: block; box-sizing: border-box; float: left; width: 240px; padding-left: 16px; font-size: 14px; line-height: 42px; color: #999; }
.search .search_input .submit { border: none; outline: none; display: block; float: right; cursor: pointer; font-size: 0; width: 51px; height: 42px; background: url(/images/s_btn.png) no-repeat center; }
/*title*/
h2.main_title { text-align: center; position: relative; padding-bottom: 15px; }
h2.main_title:after { position: absolute; content: ""; width: 24px; height: 2px; background: #ee0000; bottom: 0; left: 50%; margin-left: -12px; }
h2.main_title a { display: block; line-height: 0; }
h2.main_title i { display: block; font-size: 48px; line-height: 100%; color: #ccc; font-style: normal; font-weight: normal; text-transform: uppercase; }
h2.main_title strong { display: block; font-size: 30px; line-height: 100%; color: #000; letter-spacing: 1px; margin: 7px 0 11px; }
h2.main_title b { color: #ee0000; }
h2.main_title span { display: block; font-weight: normal; font-size: 18px; line-height: 100%; color: #666; letter-spacing: 9px; }
/*product*/
.product { padding-top: 94px; }
.pro_nav { margin: 30px 0 74px; text-align: center; font-size: 0; }
.pro_nav h3 { display: inline-block; width: 204px; height: 62px; margin: 0 8px; }
.pro_nav h3 a { display: block; background: #eeeeee; font-size: 18px; line-height: 62px; color: #666; border-radius: 31px; transition: all 0.5s ease; }
.pro_nav h3.on a,.pro_nav h3:hover a { color: #fff; background: #ee0000; }
.pro_con { height: 678px; }
.pro_con .slide { background: #fff; position: relative; height: 678px; display: block; }
.category { float: left; height: 678px; width: 282px; background: #fff; }
.category .desc { padding: 40px 42px; box-sizing: border-box; height: 345px; box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.05); }
.category .desc h3 a { display: block; font-size: 24px; line-height: 100%; color: #ee0000; font-weight: normal; position: relative; margin-bottom: 25px; }
.category .desc h3 a:before { position: absolute; content: ""; width: 31px; height: 2px; background: #ee0000; left: -42px; top: 11px; }
.category .desc p { font-size: 16px; line-height: 30px; color: #333; margin-bottom: 30px; }
.category .desc p span { display: block; }
.category .subclass { height: 333px; background: #d6d6d6; background: linear-gradient(-20deg,#d6d6d6,#efefef); box-sizing: border-box; padding: 40px 42px; }
.category .subclass h4 a { display: block; font-size: 18px; line-height: 39px; color: #333; padding-left: 25px; position: relative; font-weight: normal; }
.category .subclass h4 a:before { position: absolute; content: ""; width: 6px; height: 6px; border: 1px solid #bfbfbf; border-radius: 50%; box-sizing: border-box; top: 17px; left: 0; transition: all 0.5s ease; }
.category .subclass h4 a:hover:before { background: #ee0000; border-color: #fff; }
.pro_sub_nav { position: absolute; right: -10px; top: 11px; width: 280px; padding: 0 36px; height: 36px; z-index: 10; overflow: hidden; }
.pro_sub_nav .sub_con { width: 10000px; overflow: hidden; height: 36px; position: absolute; left: 0; }
.pro_sub_nav h4 { float: left; }
.pro_sub_nav h4 a { display: block; font-size: 16px; line-height: 36px; color: #666; font-weight: normal; transition: all 0.5s ease; padding: 0 16px; box-sizing: border-box; }
.pro_sub_nav h4:hover a { color: #333; font-weight: bold; }
.pro_sub_nav .sub_prev,.pro_sub_nav .sub_next { width: 9px; padding: 10px; position: absolute; top: 0; cursor: pointer; z-index: 10; background: #fff; }
.pro_sub_nav .sub_prev img,.pro_sub_nav .sub_next img { -webkit-filter: grayscale(1); filter: grayscale(1); opacity: 0.2; transition: all 0.5s ease; }
.pro_sub_nav .sub_prev:hover img,.pro_sub_nav .sub_next:hover img { opacity: 1; -webkit-filter: grayscale(0); filter: grayscale(0); }
.pro_sub_nav .sub_prev { left: 0; }
.pro_sub_nav .sub_next { right: 0; }
.pro_list { float: right; height: 382px; width: 865px; position: relative; }
.pro_list dl { position: relative; height: 382px; }
.pro_list dt { width: 504px; height: 382px; background: #eeeeee; overflow: hidden; line-height: 0; }
.pro_list dt img { width: 100%; }
.pro_list dd { width: 444px; height: 262px; background: #ffffff; box-shadow: 0px 0px 80px 0px rgba(232,232,232,0.55); position: absolute; right: 0; top: 73px; z-index: 2; box-sizing: border-box; padding: 50px 97px 0 48px; }
.pro_list dd h4 { font-size: 24px; line-height: 32px; color: #000; font-weight: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pro_list dd p { font-size: 14px; line-height: 30px; color: #666; max-height: 60px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 6px 0 27px; }
.pro_list dd span { display: block; width: 122px; height: 37px; background: #ee0000; text-align: center; border-radius: 19px; font-size: 14px; line-height: 37px; color: #fff; font-weight: bold; transition: all 0.5s ease; }
.pro_list dd span:hover { letter-spacing: 1px; }
.pro_list .pro_list_nav { position: absolute; top: 169px; right: 38px; width: 4px; font-size: 0; z-index: 9; }
.pro_list .pro_list_nav li { width: 4px; height: 16px; background: #2b4892; opacity: 0.2; border-radius: 2px; margin-bottom: 3px; cursor: pointer; transition: all 0.5s ease; }
.pro_list .pro_list_nav li.on { opacity: 1; background: #ee0000; }
.pro_list .pagination { position: absolute; right: 0; bottom: 0; font-size: 14px; line-height: 100%; color: #999; }
.pro_list .pagination span { color: #ee0000; font-size: 18px; }
.pro_list_more { position: absolute; right: 0; bottom: 0; }
.pro_list_more li { float: left; width: 267px; background: #eee; margin-left: 31px; padding-bottom: 25px; overflow: hidden; }
.pro_list_more li img { width: 100%; }
.pro_list_more li span { display: block; font-size: 16px; line-height: 26px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal; text-align: center; padding: 0 20px; }
/*industry*/
.industry { padding-top: 100px; max-width: 1920px; min-width: 1200px; overflow: hidden; margin: 0 auto; }
.industry ul { overflow: hidden; margin-top: 58px; background: url(/images/industry_bg.jpg) no-repeat center top; height: 900px; }
.industry li { width: 25%; float: left; height: 450px; box-sizing: border-box; padding: 74px 3.75% 0; line-height: 0; position: relative; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transition: all 0.5s ease; }
.industry li img { width: 57px; display: block; }
.industry li h3 { margin-top: 21px; height: 144px; position: relative; overflow: hidden; }
.industry li h3 strong { display: block; font-size: 24px; line-height: 100%; color: #fff; }
.industry li h3 span { display: block; font-size: 16px; line-height: 24px; color: #fff; font-weight: normal; text-transform: uppercase; margin-top: 11px; }
.industry li h3:after { position: absolute; content: ""; width: 22px; height: 16px; background: url(/images/more1.png) no-repeat center top; left: 0; bottom: 0; }
.industry li h3 a.ask { display: inline-block; font-size: 14px; line-height: 100%; color: #fff; text-decoration: underline; position: absolute; left: 0; bottom: -16px; transition: all 0.5s ease; }
.industry li h3 a.ask:hover { letter-spacing: 1px; }
.industry li i { display: block; position: absolute; font-size: 24px; line-height: 100%; color: #fff; right: 37px; bottom: 31px; }
.industry li:hover { background: rgba(238,0,0,0.8); border-right-color: rgba(238,0,0,0.8); }
.industry li:hover h3:after { display: none; }
.industry li:hover h3 a.ask { bottom: 0; }
.industry li:nth-child(4n) { border-right: none; }
/*case*/
.case { padding-top: 105px; overflow: hidden; }
.case .case_con { position: relative; height: 542px; margin-top: 43px; overflow: hidden; }
.case .case_list { position: absolute; height: 542px; width: 844px; left: 50%; margin-left: -422px; }
.case .tempWrap { overflow: visible !important; }
.case dl { margin: 0 16px; position: relative; height: 542px; }
.case dt { width: 812px; height: 509px; overflow: hidden; line-height: 0; }
.case dt img { width: 100%; }
.case dd { position: absolute; width: 295px; height: 341px; background: #f2f2f2; top: 281px; left: 38px; z-index: 2; opacity: 0; transition: all 0.5s ease; }
.case dd h4 { font-size: 20px; line-height: 30px; color: #333; max-height: 90px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.case dd p { font-size: 14px; line-height: 30px; color: #666; max-height: 90px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 12px; }
.case dd a { display: block; box-sizing: border-box; padding: 41px; height: 100%; }
.case dd a:after { position: absolute; content: ""; width: 62px; height: 34px; background: #ee0000 url(/images/more.png) no-repeat center; border-radius: 17px; left: 42px; bottom: 48px; transition: all 0.5s ease; }
.case dd a:hover:after { width: 72px; }
.case dl.active dd { opacity: 1; top: 201px; }
.case .case_prev,.case .case_next { position: absolute; width: 163px; height: 509px; top: 0; background: rgba(0,0,0,0.5) url(/images/c_prev.png) no-repeat center; transition: all 0.5s ease; z-index: 9; cursor: pointer; }
.case .case_prev:hover,.case .case_next:hover { background: rgba(255,255,255,0.8) url(/images/c_prev1.png) no-repeat center; }
.case .case_prev { left: 0; }
.case .case_next { right: 0; background-image: url(/images/c_next.png); }
.case .case_next:hover { background-image: url(/images/c_next1.png); }
/*news*/
.news { margin-top: 105px; margin-bottom: 115px; overflow: hidden; }
.news_con { width: 719px; float: left; }
.news_nav { height: 24px; margin-bottom: 39px; }
.news_nav h3 { float: left; margin-right: 63px; }
.news_nav h3 a { font-size: 24px; line-height: 100%; color: #999; transition: all 0.5s ease; }
.news_nav h3.on a { color: #333; }
.news_nav span { float: right; }
.news_nav span a { display: block; font-size: 14px; line-height: 24px; color: #ee0000; transition: all 0.5s ease; }
.news_nav span a:hover { letter-spacing: 1px; }
.news_con_list .slide { background: #fff; }
.news_con_list dl { overflow: hidden; margin-bottom: 35px; }
.news_con_list dt { width: 168px; height: 145px; overflow: hidden; float: left; line-height: 0; }
.news_con_list dt img { width: 100%; }
.news_con_list dd { float: right; width: 500px; transition: all 0.5s ease; }
.news_con_list dd h4 { font-size: 16px; line-height: 38px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.news_con_list dd span { display: block; font-size: 14px; line-height: 100%; color: #CACACA; margin: 3px 0 21px; }
.news_con_list dd p { font-size: 14px; line-height: 30px; color: #666; }
.news_con_list dl:hover dd { width: 505px; }
.news_con_list ul { border-top: 1px dashed rgba(0,0,0,0.2); }
.news_con_list ul li { width: 55%; padding-left: 19px; padding-right: 10%; box-sizing: border-box; float: left; transition: all 0.5s ease; height: 79px; border-bottom: 1px dashed rgba(0,0,0,0.2); }
.news_con_list ul li h4 { font-weight: normal; padding-left: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; line-height: 78px; color: #333; position: relative; }
.news_con_list ul li h4:before { position: absolute; content: ""; width: 10px; height: 2px; background: #ee0000; top: 38px; left: 0; }
.news_con_list ul li:nth-child(2n) { width: 45%; padding-right: 0; }
.news_con_list ul li:hover { padding-left: 14px; }
.tech { float: right; width: 381px; }
.tech h3 { height: 24px; margin-bottom: 39px; }
.tech h3 strong { display: block; font-size: 24px; line-height: 100%; color: #333; float: left; }
.tech h3 span { display: block; font-size: 14px; line-height: 24px; color: #ee0000; font-weight: normal; float: right; transition: all 0.5s ease; }
.tech h3 span:hover { letter-spacing: 1px; }
.tech li { box-sizing: border-box; height: 67px; margin-top: 21px; }
.tech li a { display: block; padding-left: 28px; padding-right: 64px; transition: all 0.5s ease; background: #f5f5f5; border-radius: 5px; position: relative; }
.tech li a:after { position: absolute; content: ""; width: 22px; height: 22px; border: 1px solid #d2d2d2; border-radius: 50%; box-sizing: border-box; content: "+"; font-size: 16px; line-height: 20px; color: #999; text-align: center; top: 22px; right: 21px; transition: all 0.5s ease; }
.tech li h4 { font-size: 16px; line-height: 67px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all 0.5s ease; font-weight: normal; }
.tech li h4:before { content: "* "; display: inline-block; padding-right: 6px; vertical-align: -2px; }
.tech li:hover a { background: #ee0000; }
.tech li:hover a:after { background: #fff; color: #ee0000; border-color: #fff; }
.tech li:hover h4 { color: #fff; }
/*about*/
.about { background: url(/images/about_bg.jpg) no-repeat center top; height: 720px; overflow: hidden; padding-top: 210px; box-sizing: border-box; text-align: center; }
.about h2 strong { display: block; font-size: 34px; line-height: 100%; color: #fff; }
.about h2 span { display: block; font-size: 24px; line-height: 100%; color: #fff; margin-top: 22px; font-weight: normal; letter-spacing: 12px; }
.about p { font-size: 14px; line-height: 36px; color: #fff; width: 1051px; margin: 28px auto 29px; }
.about .more a { display: inline-block; margin: 0 15px; width: 206px; height: 59px; border: 2px solid #ffffff; border-radius: 30px; box-sizing: border-box; text-align: left; text-indent: 56px; font-size: 16px; line-height: 54px; color: #fff; font-weight: bold; transition: all 0.5s ease; background: url(/images/more.png) no-repeat 140px center; }
.about .more a:first-child { background-color: #ee0000; border-color: #ee0000; color: #fff; }
.about .more a:hover { text-indent: 50px; background-position-x: 145px; }
/*links*/
.links { height: 120px; background: #f8f8f9; border-top: 1px solid #eeeeef; overflow: hidden; padding-top: 40px; box-sizing: border-box; }
.links em { font-style: normal; font-size: 16px; line-height: 40px; color: #333; float: left; font-weight: bold; }
.links a { display: block; font-size: 14px; color: #666; line-height: 40px; margin-right: 40px; transition: all 0.5s ease; float: left; }
.links a:hover { color: #000; }