@charset "gb2312";
/* by relten */

html, body { scroll-behavior:smooth; background-size: 100%;}
body, div, ul, ol, li, dl, dt, dd, p, form, input, select, h1, h2, h3, h4, h5, h6 { margin:0; padding:0; font-weight: normal;}
body { color:#333; font-family:"微软雅黑" }
input, select, img { vertical-align:middle; }
img { border:0; }
ul, li { list-style:none; }
a:link, a:visited { color:#333; text-decoration:none; }
a:hover { color:#d81e1e; }

.ba:link, .ba:visited { color:#fff!important; text-decoration:none; font-weight: normal!important;}
.ba:hover { color:#ff0!important; }

.width { width: 1180px; margin:auto;}

@font-face { font-family: 'bah_font'; src:url(../font/bahnschrift.ttf);}
.bah_font { font-family: "bah_font";}
.clear { clear: both; overflow: hidden;}

.red {color:#d81e1e;}
.title { font-size: 20px; font-weight: bold; margin-bottom: 25px; line-height: 30px; margin-top: 30px;}

/* home */

#top { height: 170px; position: fixed; width: 100%; z-index: 99999; background: #fff;}

	#top .logo { float: left;}
	#top .logo img { margin: 30px 0 20px;}

	#top .top_right { float: right; width: 75%;}
	#top .top_right .top_tel { margin: 30px 0; text-align: right;}
	#top .top_right .top_tel .top_tel_color { color: #d81e1e; font-size: 27px; background: url(../img/tel.png) 78% 3px no-repeat; margin-top: 5px; letter-spacing: -1px;}
	#top .top_right .top_tel p { color: #999; font-size: 14px;}

	#top .top_right .menu li { float: left; padding: 0 23px 34px; font-size: 15px;}
	#top .top_right .menu li:hover .sub_pro_menu { display: block; transition: all 0.5s; margin-top: 34px;}
	#top .top_right .menu li:hover .sub_menu { display: block; transition: all 0.5s; margin-top: 34px;}
	#top .top_right .menu .hover a { color: #d81e1e; font-weight: bold;}
	#top .top_right .menu .language { float: right; color: #0061ae;}

	#top .top_right .menu .sub_pro_menu { background: #0061ae; width: 100%; position: absolute; z-index: 999; left: 0; text-align: center; display: none; opacity: 0.9;}
	#top .top_right .menu .sub_pro_menu dl { margin: 25px 50px; display:inline-table; text-align: left; color: white;}
	#top .top_right .menu .sub_pro_menu dl dt { font-size: 16px; line-height: 46px;}
	#top .top_right .menu .sub_pro_menu dl dd { font-size: 12px; line-height: 26px; background: url(../img/arrow.png) 2px center no-repeat; padding-left: 20px;}

	#top .top_right .menu .sub_menu { background: #0061ae; z-index: 999; text-align: center; display: none; position: absolute; color: white; padding: 25px; margin-left: -25px; opacity: 0.9;}
	#top .top_right .menu .sub_menu p {  font-size: 16px; line-height: 30px;}

	.topshadow { box-shadow: 0px 3px 5px #ccc;}
	#top_height { height: 170px; overflow: hidden; width: 100%;}

#search { margin-top: 50px; overflow: hidden;}
	#search .search_left { width: 45%; font-size: 14px; float: left; background: url(../img/home_news_icon.png) left 6px no-repeat; padding-left: 40px; line-height: 36px;}

	#search .search_right { width:286px; float: right;}
	#search .search_right .input_text { width: 250px; height: 36px; line-height: 36px; color: #999; background: #f3f3f3; border: 0; text-indent: 1em; outline: none;}
	#search .search_right .input_button { width: 36px; height: 36px;background:url(../img/search.png); border: 0; outline: none;}


#home_products { margin: 30px auto; overflow: hidden; width: 1280px;}
	#home_products ul { text-align: center;}
	#home_products ul li { display: inline-block; width: 376px; height: 255px; margin:10px; background: #f3f3f3; overflow: hidden;}
	#home_products .h_p_name h1 { margin-top:25%; line-height: 60px;}
	#home_products .h_p_sort { position: relative;}
	#home_products .h_p_sort .h_p_text { position:absolute; top:40%; width: 100%; color: white; font-size: 28px; text-shadow: 5px 5px 15px #000; transition: all 0.5s;}
	#home_products .h_p_sort:hover .h_p_text { top:0; background:url(../img/home_pro_bg.png); height: 100%; width: 100%; padding: 30px 0;}
	#home_products .h_p_sort .h_p_text dl { font-size: 16px; width: 60%; margin: 8px auto; text-shadow: 5px 5px 15px #000; display: none; transition: all 0.5s;}
	#home_products .h_p_sort:hover dl { display:block;}
	#home_products .h_p_sort dd { margin-top: 10px;}
	#home_products .h_p_sort dt { line-height: 30px;}
	#home_products .h_p_sort dd a {  color: #fff;}
	#home_products .h_p_sort dt a {  color: #fff;}
	#home_products .h_p_sort dt:hover { background: #fff; color: #333; text-shadow: 0px 0px 0px #000;}
	#home_products .h_p_sort dt:hover a { background: #fff; color: #333; text-shadow: 0px 0px 0px #000;}
	#home_products .h_p_sort dd:hover a { background: #fff; color: #333; text-shadow: 0px 0px 0px #000;}
	#home_products .h_p_sort dd:hover { background: #fff; color: #333; text-shadow: 0px 0px 0px #000;}


#home_about {}
	#home_about .h_a_l { float:left; width: 44.6%; text-align: right;}
	#home_about .h_a_r { float:right; width: 55.4%; background: #f3f3f3; height: 308px;}
	#home_about .h_a_r h1 { margin: 50px 0 20px 50px; font-size: 24px;}
	#home_about .h_a_r p { font-size: 14px; width: 60%; margin-left: 50px; line-height: 30px;}



#home_foot { background:#0061ae; padding: 50px 0 30px; margin-top: 30px; height: 200px; color: white; position: relative;}
	#home_foot .h_f_l { float:left; width: 36%;}
	#home_foot .h_f_l .home_play { background: url(../img/play.png) no-repeat; padding-left: 45px; font-size: 24px; border-bottom: 1px solid #fff; width: 60%; padding-bottom: 15px;}
	#home_foot .h_f_l dl { padding-top: 20px; display: block;}
	#home_foot .h_f_l dt { font-size: 18px; padding-bottom: 10px;}
	#home_foot .h_f_l dd { font-size: 14px; line-height: 26px;}

	#home_foot .h_f_r { float:right; width: 63%; text-align: right;}
	#home_foot .h_f_about { width: 26%; background: #666; padding: 15px; right: 0; position: absolute; font-size: 22px; top:-60px;}
	#home_foot .h_f_about p { font-size: 14px; line-height: 30px;}


#foot { font-size: 14px; line-height: 55px;}
	#foot .f_l { float:left; color: #666; font-size: 12px;}
	#foot .f_r { float:right; text-align: right;}
	#foot .f_r li { float:left; margin-left: 30px;}


#bottom { overflow: hidden; background: #757575; }
	#bottom .b_l { float: left; width: 50%; background: #0061ae; padding: 20px 0;}
	#bottom .b_l .from { width:590px; float: right;}
	#bottom .b_l .from p { font-size: 18px; color: #fff; line-height: 46px;}
	#bottom .b_l .from .inputtxt { width:90%; float: left; line-height: 36px; border: 0; outline: none; text-indent: 1em; font-size: 14px; color: #666; margin-bottom: 7px;}
	#bottom .b_l .from .xuqiu { width:89.4%; float: left; line-height: 36px; border: 0; outline: none; text-indent: 1em; font-size: 14px; color: #666; margin-bottom: 7px;  font-family:"微软雅黑" }
	#bottom .b_l .from .button { float: left; line-height: 30px; border: 0; outline: none;font-size: 16px; color: #666; margin-top: 5px; padding: 3px 30px; background: #ff0;}
	#bottom .b_l .from .button2 { float: left; line-height: 30px; border: 0; outline: none;font-size: 16px; color: #fff; margin-top: 5px; padding: 3px 30px; background: #666; margin-left: 10px;}

	#bottom .b_r { float: right; width: 50%;padding: 20px 0; color: #fff;}
	#bottom .b_r .b_tel_hot { margin-left: 80px; margin-top: 25px; background: #333; padding: 15px; width: 25%;}
	#bottom .b_r .b_tel_hot p { font-size: 24px;}

	#bottom .b_r .b_tel { margin-left: 80px; }
	#bottom .b_r .b_tel dl { padding-top: 20px; display: block;}
	#bottom .b_r .b_tel dt { font-size: 18px; padding-bottom: 10px;}
	#bottom .b_r .b_tel dd { font-size: 14px; line-height: 26px;}



#pro_banner { background: url(../img/pro_banner.jpg) center center no-repeat; height: 400px; background-size: auto 100%; position: relative; text-align: center;}
#pro_banner h3 { font-size: 40px; text-shadow: 0px 3px 4px #333; color: #fff; top:50%; position: absolute; width: 100%; margin-top: -20px; line-height: 40px;}

#about_banner { background: url(../img/about_banner.jpg) center center no-repeat; height: 400px; background-size: auto 100%; position: relative; text-align: center;}
#about_banner h3 { font-size: 40px; text-shadow: 0px 3px 4px #333; color: #fff; top:50%; position: absolute; width: 100%; margin-top: -20px; line-height: 40px;}

#contact_banner { background: url(../img/contact_banner.jpg) center center no-repeat; height: 400px; background-size: auto 100%; position: relative; text-align: center;}
#contact_banner h3 { font-size: 40px; text-shadow: 0px 3px 4px #333; color: #fff; top:50%; position: absolute; width: 100%; margin-top: -20px; line-height: 40px;}

#news_banner { background: url(../img/news_banner.jpg) center center no-repeat; height: 400px; background-size: auto 100%; position: relative; text-align: center;}
#news_banner h3 { font-size: 40px; text-shadow: 0px 3px 4px #333; color: #fff; top:50%; position: absolute; width: 100%; margin-top: -20px; line-height: 40px;}

#service_banner { background: url(../img/service_banner.jpg) center center no-repeat; height: 400px; background-size: auto 100%; position: relative; text-align: center;}
#service_banner h3 { font-size: 40px; text-shadow: 0px 3px 4px #333; color: #fff; top:50%; position: absolute; width: 100%; margin-top: -20px; line-height: 40px;}

/* 产品 */

#products { margin: 50px auto 0; overflow: hidden;}

	#products .pro_list { width: calc( 100% / 2 ); float: left; margin-bottom: 50px;}

	#products ul { width: 340px; float: left;}
	#products li { height: auto; overflow: hidden; border-radius: 10px;}
	#products li img { width: 100%; transition: all 0.5s;}
	#products li:hover img { transform: scale(1.05);}

	#products dl { float: left; margin-left: 25px;}
	#products dt { font-size: 18px; line-height: 36px;}
	#products dd { font-size: 13px; line-height: 24px; background: url(../img/arrow_black.png) left center no-repeat; padding-left: 15px; color: #666;}


#pro { margin: 50px auto; overflow: hidden;}
	#pro .pro_class { margin:0 auto ; width: 65%;}
	#pro .pro_class ul { text-align: center;}
	#pro .pro_class ul li { display: inline-table; margin: 10px;}
	#pro .pro_class ul li p { line-height: 36px;}
	#pro .pro_class ul li  img { width: 374px; height: 254px; border: 1px solid #ddd;}

.pro_number { text-align: center; margin: auto;}

.pro_show {}
.pro_left { width:75%; float: left;}
	.pro_left .subtitle {line-height: 50px; font-size: 12px; color: #999;}
	.pro_left img { width: 100%; max-width: 800px; margin: 20px 0;}
	.pro_left .pro_text { line-height: 30px; font-size: 14px; color: #666; width: 100%; max-width: 800px; text-align: justify;}
	.pro_left .xiangguan { line-height: 26px; margin-top: 20px; font-size: 14px;}
	.pro_left .xiangguan span { color:#d81e1e;}

.pro_right { width: 24%; float: right;}
.pro_right h4 { font-weight: bold;}
.pro_right li { margin-top: 25px;}
.pro_right li p { text-align: center; line-height: 36px;}
.pro_right img { width: 100%; max-width: 320px; border: 1px solid #ddd;}



#news { margin: 50px auto; overflow: hidden;}
	#news .news_list { margin:0 auto ; width: 65%;}
	#news .news_list ul { text-align: center;}
	#news .news_list ul li { display: inline-table; margin: 10px;}
	#news .news_list ul li p { line-height: 36px;}
	#news .news_list ul li img { width: 376px; height: 256px;}

.huaban { width: 100%; margin:50px auto; text-align: center;}
.huaban img { width: 100%; max-width: 1178px;}


.about_info { width: 100%; margin: auto; background: url(../img/about_bg.jpg) center top no-repeat;height: 880px; background-size: auto 100%;}
.about_text { padding-top: 150px;}
.about_text h1 { width: 50%; padding:30px; line-height: 30px; text-align: justify; background: #fff; opacity: 0.8;}
.about_text p { width: 50%; padding:0 30px 20px; line-height: 30px; text-align: justify; background: #fff; opacity: 0.8;}


.contact_info { width: 100%; margin:50px auto;}
.contact_text h1 { font-size: 28px; margin-bottom: 20px;}
.contact_text p { font-size: 14px; line-height: 26px;}


.baidumap { width: 1150px; height: 480px; border: 15px solid #f0f0f0; margin:80px auto 0;}
.noinfo { line-height: 80px; padding: 80px 0;}


.info { padding: 50px 0; overflow: hidden;}
	.info h3 { line-height: 36px; color: #d81e1e; font-weight: bold;}
	.info h4 { line-height: 36px;}
	.info h5 { margin-top: 30px; line-height: 36px; background: #ddd; border-radius: 100px; width:200px; text-align: center; padding: 0 15px;} 
	.info ul { margin: 20px auto; font-size: 18px; color: #fff; clear: both; display: block; overflow: hidden;}
	.info li { width: 80px; height: 80px; border-radius: 100px; background:#de5d40; text-align: center; line-height: 80px; float: left; margin: 10px 20px 10px 0;}
	.info li:nth-of-type(2) { background:#4c76df; color: #fff;}
	.info li:nth-of-type(3) { background:#2da462; color: #fff;}
	.info li:nth-of-type(4) { background:#dfb44c; color: #fff;}

	.info_left { float: left; width: 40%; margin-top: 30px;}
	.info_right { float: right;width: 58%; margin-top: 30px;}
	.info_right dl { clear: both;}
	.info_right dt { }
	.info_right dt img { width: 100%; border-radius: 10px;}
	.info_right dd { font-size: 14px; margin-top: 25px; float: left; width: calc( 100% / 2);}
	.info_right dd span { font-weight: bold; font-size: 16px; color: #d81e1e; line-height: 36px;}
	.info_right dd p {}


.info_job { padding: 50px 0; position: relative; width: 100%;}
	.info_job ul { background: #eee; margin: 50px 0; padding: 30px 0; font-size: 14px;}
	.info_job ul li { margin: 15px 0 15px 50px; line-height: 36px; padding-left: 10px;}
	.info_job  ul li:hover { background: #d81e1e; color: #fff;}
	.info_job  ul li:hover a { background: #d81e1e; color: #fff;}
	.info_job .job_hover { background: #d81e1e; color: #fff;}

	.job_tel { line-height: 26px; padding-left: 60px; margin-top: 35px;}
	.job_tel span { color: #d81e1e;}

.job_left { width: 35%; float: left;}
.job_right { width: 60%; float: right;}


.job_right .job { font-size: 14px; padding: 50px 0; line-height: 30px;}
.job_right .job h1 { width: 40px; height: 4px; background: #d81e1e; margin-bottom: 15px;}
.job_right .job span { font-size: 16px; font-weight: bold; margin-top: 20px; display: block;}
.job_right .job_submit { font-size: 14px; color: #fff; margin-top: 40px; background: #de5d40; padding: 15px 40px; border: 0;}


.server_left { width: 46%; float: left;}
	.server_left p { line-height: 26px; margin-bottom: 8px; padding-top: 12px; font-size: 14px;}
	.server_left img { width: 100%; border-radius: 8px;}

.server_right { width: 46%; float: right;}
	.server_right p { line-height: 26px; margin-bottom: 8px; padding-top: 12px; font-size: 14px;}
	.server_right img { width: 100%; border-radius: 8px;}




#formpage span {
    border: 1px solid #ddd;
    padding: 5px 10px;
    font-size: 14px;
    margin-right: -1px;
	line-height: 30px;
}



/* 手机 */

@media screen and (max-width:1750px){
	#pro .pro_class { width: 98%;}
	#news .news_list { width: 98%;}
}

@media screen and (max-width:1280px){
	.width { width: 100%;}
	
	#top .top_right .top_tel .top_tel_color { background-position: 75% 3px; }
	#home_products { width: 100%;}
	#home_products ul li { float: left; width:326px; margin: 0 23px 23px 0;}
	#home_products ul li:nth-of-type(3n) { margin: 0 0 23px 0;}
	#home_foot .h_f_r img { width:100%; }
	#home_about .h_a_r h1 { margin: 30px 0 20px 50px;}
	#home_about .h_a_r p { width:90%; }
	#home_foot .h_f_about { width:18%; }
	
	#products ul { width: 280px;}
	#products .pro_list:nth-of-type(5n) { clear:both;}
	#bottom .b_r .b_tel_hot { width: 50%;}
	#bottom .b_l .from { width: 96%; margin: auto;}
	#pro_banner,#about_banner,#contact_banner,#news_banner,#service_banner {height: 220px;}
	
	
	
}

@media screen and (max-width:1180px){
	.baidumap { width: 95%; height: 380px; border: 5px solid #f0f0f0; margin:50px auto 0;}
}

@media screen and (max-width:1000px){
	#top .top_right { display: none;}
	#top { height: 150px;}
	#top_height { height: 150px;}
	#top .logo img { width: 60%; margin: 20px 20px 0;}
	
	
	#home_products ul li { width:360px; float: none; margin: 10px;}
	#home_products ul li:nth-of-type(3n) { margin:10px;}
	
	
	#home_about .h_a_r h1 { margin: 15px 0 20px 20px;}
	#home_about .h_a_r p { width:95%; margin-left:20px;}
	
	#home_foot { display: none;}
	#foot .f_l { width: 100%; text-align: center;}
	#foot .f_r { display: none;}
	
	#products .pro_list { width:96%;}
	#products ul { width:auto;}
	#products { width: 96%; margin: 50px auto;}
	
	.pro_left { width: 96%; clear: both; margin:auto; float: none;}
	.pro_right { width: 96%; clear: both; margin: 50px auto 0;}
	.pro_right li { display: inline-table;}
	
	
	.info_right dd { width: 100%;}
	
}


@media screen and (max-width:680px){
	#search { display: none;}
	#home_products ul li { width:350px;}
	#home_about .h_a_l { display: none;}
	#home_about .h_a_r { width: 100%; height:auto;}	
	#home_about .h_a_r p { width:90%; margin-left:20px; text-align: justify;}
	
	#bottom .b_l { width: 100%;}
	#bottom .b_r { display: none;}
	
	#products dl { margin-left: 0; margin-top: 15px;}
	.about_text h1 { width: 85%; margin: auto}
	.about_text p { width: 85%; margin: auto;}
	
	.baidumap { display: none;}
	
	.info_left { float: none; width: 96%; margin: 30px auto 0;}
	.info_right { float: none;width: 96%; margin: 30px auto 0;}
	
	.info li { margin: 10px 15px 10px 0}
	
	.job_left { float: none; width: 96%; margin: 10px auto 0;}
	.job_right { float: none; width: 96%; margin: 10px auto 0;}
	
	.server_left { float: none; width: 96%; margin: 10px auto 0;}
	.server_right { float: none; width: 96%; margin: 10px auto 0;}
}