@charset "utf-8";



body{min-width: 1200px; margin: 0 auto; padding: 0; font-size: 14px; font-family: Microsoft YaHei, SimSun;}
img{border: 0;}
form{margin: 0; padding: 0;}
input, select, textarea{font-family: Microsoft YaHei, SimSun;}
div, ul, li{margin: 0; padding: 0; display: block; overflow: hidden; backface-visibility: hidden; perspective: 1000px;}
ul, li{list-style-type: none;}
li{text-overflow: ellipsis;}
a{text-decoration: none; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none;}
a:hover{text-decoration: none; color: #f63;}

@keyframes fadeIn{
0%{opacity: 0;}
100%{opacity: 1;}
}

.himg{position: relative; z-index: 1;}
.himg img{min-width: 100%; height: 100%; position: absolute; z-index: -1; left: -200%; top: -200%; right: -200%; bottom: -200%; margin: auto; transition: all 0.4s;}
.himg:hover img{transform: scale(1.1,1.1);}

.a_row{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

header{max-width: 1200px; margin: 0 auto 10px auto;}
header .top{height: 100px; position: relative;}
header .top .logo{position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
header .top .tel{height: 50px; line-height: 25px; padding-left: 60px; font-size: 20px; font-family: Arial; color: #333; position: absolute; top: 0; right: 0; bottom: 0; margin: auto;}
header .top .tel:before{content: '服务热线'; margin-right: 10px; font-size: 16px; color: #666;}
header .top .tel:after{content: ''; width: 50px; height: 50px; background-image: url(/web/images/icon.png); position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
header .top .tel small{font-size: 20px; color: #f00; display: block;}
header .nav{height: 50px; text-align: center; background-color: #d40505; border: 1px solid #fff; outline: 1px solid #ffcece;}
header .nav li{height: 100%; text-align: center; display: inline-block; overflow: visible; position: relative;}
header .nav li:before{content: ''; width: 1px; height: 20px; background-color: #f88; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; margin: auto;}
header .nav li:last-child:before{display: none;}
header .nav li .a{height: 30px; line-height: 30px; display: block; color: #fff; font-size: 16px; margin: 10px; padding: 0 20px;}
header .nav li .sub{background-color: #666; position: absolute; left: 0; top: 100%; right: 0; margin: auto; display: none;}
header .nav li .sub a{height: 36px; line-height: 36px; display: block; border-top: 1px solid #fff; color: #fff; font-size: 14px;}
header .nav li .sub a:hover{background-color: #333;}
header .nav li:hover .a{background-color: #ff2f2f; border-radius: 5px;}
header .nav li:hover .sub{display: block; animation: fadeIn 0.4s;}
header .nav_show{width: 30px; height: 26px; background-color: #fff; opacity: 0.7; position: absolute; top: 0; right: 10px; bottom: 0; margin: auto; display: none;}
header .nav_show:before,
header .nav_show:after{content: ''; height: 4px; border-top: 4px solid #9f1824; border-bottom: 4px solid #9f1824; position: absolute; left: 0; right: 0; margin: auto;}
header .nav_show:before{top: 4px;}
header .nav_show:after{bottom: 2px;}

#ibn{height: 480px; position: relative; margin: 0 auto 40px auto;}
#ibn .goto{width: 30px; height: 40px; cursor: pointer; background-image: url(/web/images/icon.png); position: absolute; top: 0; bottom: 0; margin: auto 0;}
#ibn .goto.prev{background-position: -50px 0; right: 50%; margin-right: 610px;}
#ibn .goto.prev:hover{background-position: -80px 0;}
#ibn .goto.next{background-position: -110px 0; left: 50%; margin-left: 610px;}
#ibn .goto.next:hover{background-position: -140px 0;}
#ibn .list{max-width: 1200px; height: 100%; margin: 0 auto; white-space: nowrap;}
#ibn .list li{width: 100%; height: 100%; position: relative; display: inline-block; transition: margin-left 0.6s;}
#ibn .list li img{min-width: 100%; height: 100%; position: absolute; left: -200%; top: 0; right: -200%; margin: auto;}

.abt{max-width: 1200px; height: 40px; line-height: 20px; margin: 20px auto; position: relative;}
.abt strong{font-size: 18px; display: block; font-weight: normal;}
.abt small{font-size: 12px; display: block; color: #999; font-family: Arial; text-transform: uppercase;}
.abt .more{width: 100px; height: 30px; line-height: 30px; text-transform: uppercase; color: #666; text-align: center; border: 1px solid #ccc; position: absolute; top: 0; right: 0; bottom: 0; margin: auto;}
.abt .more:hover{color: #333; border-color: #999;}

.about{max-width: 1200px; height: 260px; margin: 0 auto 40px auto;}
.about p{padding: 0; margin: 0; display: inline-block; overflow: hidden;}
.about .himg{width: 440px; height: 260px; float: left; margin-right: 40px;}
.about .name{height: 40px; position: relative; font-size: 20px; color: #333;}
.about .name:before{content: ''; width: 40px; height: 3px; background-color: #c40000; position: absolute; left: 0; bottom: 0;}
.about .dect{height: 130px; line-height: 26px; color: #666; margin: 20px 0;}
.about .more{width: 200px; height: 40px; line-height: 40px; text-transform: uppercase; color: #666; text-align: center; border: 1px solid #ccc; display: inline-block;}
.about .more:hover{color: #333; border-color: #999;}

.about{transform: translateY(100%); opacity: 0; transition: transform 1s;}
.about .himg{transform: translateX(-100%); opacity: 0; transition: transform 0.6s 0.4s;}
.about.on{transform: translateY(0%); opacity: 1;}
.about.on .himg{transform: translateX(0%); opacity: 1;}

.service{max-width: 1200px; margin: 0 auto 40px auto;}
.service a{width: 300px; height: 360px; text-align: center; border: 1px solid #ddd; padding: 19px; float: left; margin-right: 90px;}
.service a:last-child{margin-right: 0;}
.service a p{padding: 0; margin: 0; display: inline-block; overflow: hidden;}
.service a .img{width: 180px; height: 180px; background-color: #ebebeb; border-radius: 50%; position: relative; margin: 20px auto;}
.service a .img img{max-height: 60%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: transform 0.6s;}
.service a .name{height: 40px; line-height: 40px; background-color: #ebebeb; display: block; color: #333; margin: 10px auto 20px auto;}
.service a .dect{height: 50px; line-height: 25px; display: block; color: #666; white-space: normal;}
.service a:hover{border-color: #bbb;}
.service a:hover .img img{transform: rotateY(180deg);}
.service a:hover .name{background-color: #ccc;}

.service a{transform: translateX(-300%); opacity: 0; transition: transform 1s ease-out;}
.service.on a{transform: translateX(0%); opacity: 1;}
.service.on a:nth-child(2){transition-duration: 1.5s;}
.service.on a:nth-child(1){transition-duration: 2s;}

#case{height: 310px; position: relative; margin: 0 auto 40px auto;}
#case .goto{width: 30px; height: 40px; cursor: pointer; background-image: url(/web/images/icon.png); position: absolute; top: 0; bottom: 100px; margin: auto 0;}
#case .goto.prev{background-position: -50px 0; right: 50%; margin-right: 610px;}
#case .goto.prev:hover{background-position: -80px 0;}
#case .goto.next{background-position: -110px 0; left: 50%; margin-left: 610px;}
#case .goto.next:hover{background-position: -140px 0;}
#case .case_list{height: 100%; white-space: nowrap;}
#case .case_list a{margin: 0 8px 0 0; float: none; display: inline-block; transition: margin-left 0.6s;}

.case_list{max-width: 1200px; margin: 0 auto;}
.case_list a{width: 294px; height: 310px; position: relative; margin: 3px; float: left;}
.case_list a .himg{width: 290px; height: 210px; border: 1px solid #fff; outline: 1px solid #ccc; display: block; overflow: hidden; margin: 1px;}
.case_list a strong{height: 20px; line-height: 20px; text-align: center; font-weight: normal; font-size: 16px; color: #333; display: block; margin: 13px 0;}
.case_list a small{height: 50px; line-height: 25px; white-space: normal; color: #666; overflow: hidden; display: block;}
.case_list a:hover .himg{outline-color: #999;}

#case .case_list{transform: translateX(-100%); opacity: 0; transition: transform 1s;}
#case .case_list.on{transform: translateX(0%); opacity: 1;}

.honor{max-width: 1200px; height: 280px; margin: 0 auto 40px auto; white-space: nowrap;}
.honor a{width: 380px; height: 100%; position: relative; display: inline-block; margin-right: 30px;}
.honor a .himg{width: 360px; height: 230px; border: 10px solid #666; display: block; overflow: hidden;}
.honor a strong{height: 20px; line-height: 20px; font-weight: normal; text-align: center; font-size: 16px; color: #333; display: block; margin-top: 10px;}
.honor a:hover .himg{border-color: #333;}

.honor{transform: translateX(-100%); opacity: 0; transition: transform 1s;}
.honor.on{transform: translateX(0%); opacity: 1;}

#news{max-width: 1200px; margin: 0 auto 40px auto;}
#news .tab{height: 40px; line-height: 40px; margin-bottom: 30px;}
#news .tab li{display: inline-block; background-color: #333; color: #fff; margin-right: 10px; padding: 0 30px; cursor: pointer;}
#news .tab li.on{background-color: #c40000;}
#news .box{height: 270px;}
#news .box .news_list{height: 300px; transition: margin-top 1s;}

.news_list li{width: 560px; height: 120px; float: left; margin-right: 40px; margin-bottom: 30px;}
.news_list li .himg{width: 160px; height: 120px; float: left; margin-right: 20px; background-color: #ddd; overflow: hidden;}
.news_list li strong{height: 30px; line-height: 30px; font-weight: normal; font-size: 16px; color: #333; display: block; margin-bottom: 10px;}
.news_list li p{height: 75px; line-height: 25px; color: #666; overflow: hidden; padding: 0; margin: 0; white-space: normal;}

.body{max-width: 1200px; margin: 0 auto;}
.body .abt{border-bottom: 1px solid #ccc; padding-bottom: 20px; text-align: center;}

.nbn{height: 350px; position: relative;}
.nbn img{height: 100%; position: absolute; left: -100%; top: 0; right: -100%; margin: auto;}

.category{line-height: 40px; margin-bottom: 30px;}
.category li{display: inline-block; background-color: #333; color: #fff; margin-right: 10px; margin-bottom: 10px; padding: 0 30px; cursor: pointer;}
.category li a{color: #fff;}
.category li.on{background-color: #c40000;}

.content{line-height: 200%; margin: 20px auto;}
.content img{max-width: 100%;}
.content h1{line-height: 140%;}

.jobs_list li{background-color: #eee; padding: 10px 10px 10px 150px; margin-bottom: 15px; position: relative;}
.jobs_list li:before{content: ''; width: 120px; background-color: #ddd; position: absolute; left: 0; top: 0; bottom: 0; margin: auto;}
.jobs_list li:after{content: ''; width: 0; height: 0; border-left: 10px solid #ddd; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; left: 120px; top: 0; bottom: 0; margin: auto;}
.jobs_list li .name{width: 100px; text-align: center; position: absolute; left: 10px; top: 10px;}
.jobs_list li .dect{line-height: 25px; color: #666;}

.jobs_list li .jbtn{height: 24px; line-height: 24px; font-size: 12px; text-indent: 20px; border-radius: 4px; background-color: #ddd; color: #666; padding-right: 5px; cursor: pointer; position: absolute; right: 10px; bottom: 10px; display: none;}
.jobs_list li .jbtn:before{content: ''; width: 0; height: 0; border-top: 5px solid #666; border-left: 5px solid transparent; border-right: 5px solid transparent; position: absolute; left: 5px; top: 0; bottom: 0; margin: auto;}
.jobs_list li .jbtn.tab{display: block;}
.jobs_list li .jbtn.tab:before{border-left: 5px solid #666; border-top: 5px solid transparent; border-bottom: 5px solid transparent; left: 7px;}

.jobs_btn{width: 120px; height: 40px; line-height: 40px; text-align: center; margin: 20px auto; background-color: #666; color: #fff; font-size: 16px; border-radius: 4px; cursor: pointer;}
.jobs_btn:hover{background-color: #333;}

.page{text-align: center; font-family: Verdana; margin-top: 20px;}
.page a{height: 24px; line-height: 24px; display: inline-block; margin: 0 3px; padding: 0 8px;}
.page .in{background-color: #d40505; color: #fff;}

.cnt_map{height: 380px;}

#map{width: 100%; background-color: #ccc;}
#map div{overflow: visible;}
#map img{max-width: none;}
#map .anchorBL{display: none;}

footer{background-color: #fff; padding-top: 40px;}

.contact{max-width: 1200px; height: 280px; margin: 0 auto;}
.contact .cnt{width: 400px; float: left; color: #333; margin-right: 20px;}
.contact .cnt strong{height: 30px; line-height: 30px; font-size: 22px; font-weight: normal; display: block; margin-bottom: 15px;}
.contact .cnt p{padding: 0; margin: 0;}
.contact .cnt p.row{line-height: 27px;}
.contact .cnt p.row:before{content: attr(data-name);}
.contact .cnt p.qrc{width: 130px; height: 150px; line-height: 20px; color: #666; float: left;}
.contact .cnt p.qrc img{width: 110px; height: 110px; display: block;}
.contact #form_msg{display: block;}
.contact #form_msg .name{height: 30px; line-height: 30px; font-size: 22px; color: #333; margin-bottom: 20px; border-left: 3px solid #c10505; padding-left: 15px;}
.contact #form_msg p{padding: 0; margin: 0; display: inline-block;}
.contact #form_msg p.row{line-height: 30px; border-bottom: 1px solid #999; padding-bottom: 10px; margin-right: 20px;}
.contact #form_msg p.row:before{content: attr(data-name); width: 40px; color: #333; float:left;}
.contact #form_msg p.row input{width: 200px; height: 30px; line-height: 30px; border: 0; padding: 0; margin: 0; outline: 0; background-color: transparent;}
.contact #form_msg p.row.last{margin-right: 0;}
.contact #form_msg p.row.text{margin-top: 20px; margin-bottom: 20px;}
.contact #form_msg p.row textarea{width: 720px; height: 60px; line-height: 30px;resize: none; border: 0; padding: 0; margin: 0; outline: 0; background-color: transparent;}
.contact #form_msg p.btn{height: 40px; line-height: 40px; background-color: #666; color: #fff; font-size: 16px; padding: 0 40px; cursor: pointer; float: left;}

.copyright{text-align: center; background-color: #000; color: #fff; padding: 20px 0; margin-top: 20px;}
.copyright a{color: #fff;}

.quick{display: none;}@media screen and (max-width: 650px){
body{min-width: 0; padding-top: 70px;}

header{height: 70px; border-bottom: 1px solid #ccc; background-color: #fff; position: fixed; z-index: 2; left: 0; top: 0; right: 0; margin: auto;}
header .top{height: 70px;}
header .top .logo{height: 50px; left: 10px;}

header .top .tel{display: none;}

header .nav{width: 120px; height: auto; padding: 10px 0; border: 0; outline: 0; position: fixed; top: 50px; right: 0; bottom: auto; display: none;}
header .nav li{height: 30px; line-height: 30px; font-size: 12px; padding: 0; float: none; display: block; text-align: center;}
header .nav li:before{display: none;}
header .nav li .a{border-bottom: 0; color: #fff; font-size: 14px;}
header .nav li .sub,
header .nav li:hover .sub{display: none;}
header .nav.on{display: block;}
header .nav_show{display: block;}

#ibn{height: 150px; margin-bottom: 20px;}

.abt{margin: 10px;}
.abt .more{width: 80px; height: 20px; line-height: 20px; font-size: 12px;}

.about{height: auto; margin: 0 10px 20px 10px;}
.about .himg{display: none;}
.about .name{height: 30px; font-size: 16px;}

.service{margin-bottom: 20px;}
.service a{width: calc(100% / 3 - 10px); height: 190px; padding: 0; margin: 4px;}
.service a .img{width: 80px; height: 80px; margin: 10px auto;}
.service a .name{height: 30px; line-height: 30px; font-size: 10px; margin-top: 0; margin-bottom: 10px;}
.service a .dect{height: 40px; line-height: 20px; font-size: 10px;}

#case{margin-bottom: 20px;}
#case .case_list{width: 294px;}

.honor{height: auto; margin-bottom: 20px;}
.honor a{width: calc(100% - 20px); height: auto; margin: 10px; float: left;}
.honor a .himg{width: calc(100% - 20px);}

#news{margin-bottom: 20px;}
#news .tab{height: 30px; line-height: 30px; margin: 10px;}
#news .tab li{padding: 0 15px;}
#news .box{height: 400px;}
#news .box .news_list{height: 400px; margin: 0 10px;}

.news_list li{width: 100%; height: 80px; margin: 10px 0;}
.news_list li .himg{width: 110px; height: 80px; margin-right: 10px;}
.news_list li strong{height: 20px; line-height: 20px; margin-bottom: 0; font-size: 12px;}
.news_list li p{height: 60px; line-height: 20px; font-size: 10px;}

footer{padding-top: 0; margin-bottom: 60px;}

.contact{height: auto;}
.contact .cnt{width: auto; margin: 0 10px; font-size: 10px;}
.contact .cnt p.row{line-height: 20px;}
.contact .cnt p.qrc,
.contact #form_msg{display: none;}

.copyright{font-size: 10px; padding: 5px 0;}

.nbn{height: 120px;}

.body .abt{padding-bottom: 10px;}

.category{line-height: 20px; margin: 10px;}
.category li{padding: 0 10px; font-size: 12px;}

.content{margin: 0 10px;}

.cnt_map{height: 160px; margin: 10px 0;}

.quick{height: 60px; background-color: #eee; position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; margin: auto; display: block;}
.quick a{width: 33.3%; height: 30px; line-height: 30px; padding-top: 30px; font-size: 12px; color: #f00; float: left; text-align: center; position: relative;}
.quick a:before{content: ''; width: 50px; height: 50px; background-image: url(/web/images/icon2.png); display: block; transform: scale(0.5,0.5); position: absolute; left: 0; top: -5px; right: 0; margin: auto;}
.quick a:after{content: ''; width: 1px; background-color: #ccc; position: absolute; top: 0; right: 0; bottom: 0; margin: auto;}
.quick a:last-child:after{display: none;}
.quick a.tel:before{background-position: 0 0;}
.quick a.qq:before{background-position: -50px 0;}
.quick a.msg:before{background-position: -100px 0;}
.quick a.cnt:before{background-position: -150px 0;}
}