@charset "utf-8";
/* CSS Document */

html{ width:100%; height:100%}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;} 
body{width:100%; height:100%; position:relative; background:#fff;color:#333;font-size:12px; font-family:"SimSun","宋体","Arial Narrow";} 
 
ul,ol{list-style-type:none;} 
select,input,img,select{vertical-align:middle;} 
 
a{text-decoration:none; cursor:pointer}  
a:hover,a:active,a:focus{color:#c00;}

input[type=button], input[type=submit], input[type=reset] {
    -webkit-appearance: none;
}
textarea {  -webkit-appearance: none;}
.catalog li a {
	font-size: 15px;
	font-weight: bold;
}
.clearfix { clear:both}

/*----  container -----*/
.container{ width:100%; max-width:1200px; margin:0 auto; font-family:"MicrosoftYaHei";}

/*---  头部 ----*/
.head{ padding:6px 0 8px; height:60px}
.head .iconfont{ font-size:30px; margin-top:15px; display:none}
#icon_category{ float:left; font-size: 20px; margin-top: 17px; font-style: normal; display:none}
#icon_menu{ float:right}
.head .logo{ display:inline-block;}
.logo a{ display:inline-block; vertical-align:middle}
.logo span{ display:inline-block; vertical-align:middle; font-size:16px; font-weight:bold; color:#333333; margin-left:25px}

.head{ position:relative}
.head #nav{ float:right; height:100%}
.head #nav:after{ content:''; display:inline-block; width:0; height:100%; vertical-align:bottom}
.head #nav li{ display:inline-block; margin-left:20px; vertical-align:baseline; line-height:24px}
.head #nav li:nth-last-child(1){ margin-right:15px}
.head #nav li a{ display:block; font-size:14px; font-weight:bold; color:#336c89;}
.head #phone_nav{  position:absolute; width:100%; top:100%; left:0; overflow:hidden; z-index:998; background:#fff; transform:scale(1,0); transform-origin:50% 0%; -ms-transform: scale(1,0); /* IE 9 */
	-ms-transform-origin:50% 0%; /* IE 9 */-webkit-transform: scale(1,0); /* Safari and Chrome */-webkit-transform-origin:100% 0%; transition:all 0.5s ease}
.head #phone_nav.on{ transform:scale(1,1);}
.head #phone_nav li{ display:block; border-bottom:1px solid #646464}
.head #phone_nav li a{ display:block; line-height:45px; text-align:left; padding:0 10px; color:#323232}

.main{}
.main .left{ width:22%; display:inline-block; padding:15px; box-sizing:border-box; background:url(../images/left_bg.jpg) no-repeat center center; background-size:100% 100%; border-radius:5px; }
.main .left.on{ left:0}
.left{
	position: relative;
}
.left li{ margin-bottom:16px;}
.left li a{ display:block; line-height:40px; font-size:12px; color:#fff; padding-left:10px}
.left li a:hover, .left li a.on{ color:#144f56; background:url(../images/left_li_bg.png) no-repeat; background-size:100% 100%}
.left .search{ margin-bottom:10px}
.left .search h4{ font-size:14px; font-weight:bold; color:#fff; margin-bottom:15px}
.left .search h4:before{ content:''; display:inline-block; vertical-align:middle; background:url(../images/sjx.jpg) no-repeat; background-size:100% 100%; width:8px; height:9px; margin-right:10px}
.left .search #keyword{ width:76%; margin-right:4%; height:30px; border:none; background:#fff; border-radius:3px; padding:0 5px; box-sizing:border-box}
.left .search #btn{ width:20%; height:30px; height:30px; border:none; background:#e4e4e4; border-radius:3px}
.left li ul{position: absolute;left: 90%;top: 0;z-index: 99;width: 328px;padding-left: 54px;}
.left li ul li{background: #206e78;margin-bottom: 0;}
.left li li a{width: 85%;margin: auto;line-height: 1.6;padding: 10px;}
.left li ul li:first-child{padding-top: 16px;}
.left li ul li:last-child{padding-bottom: 16px;}
.main{ min-height:776px; position:relative}
.main .right{ float:right; position:relative; width:76%; border-radius:3px; overflow:hidden}
.right .index_about{ width:97%; background:url(../images/index_about_bg.png) no-repeat center; background-size:100% 100%; margin-bottom:15px; z-index:500; left:1.5%; top:15px; padding:15px 25px 20px; color:#fff; box-sizing:border-box}
.index_about h4{ font-size:14px; font-weight:bold; padding-bottom:7px; border-bottom:1px solid #fff; margin-bottom:15px}
.index_about .content{ font-size:12px; line-height:20px;}
.swiper-container-horizontal>.swiper-pagination-bullets{ bottom:20px; right:15px; left:auto}
.swiper-pagination{ text-align:right}
.swiper-pagination-bullet{ width:26px; height:4px; background:#909193; border-radius:0; opacity:1}
.swiper-pagination-bullet-active{ background:#fff}

.here{ font-size:12px; color:#646464; padding:0 15px; line-height:40px; background:#f5f5f5; border-radius:5px}
.here a{ color:#646464;}
.here a:hover{ color:#306c88}
.page_title{ font-size:18px; color:#316d89; padding:0 0 14px 0; line-height:1; margin-top:35px}
.right_main{ padding:0 15px; font-size:14px; color:#333333;}
.right_main.product{ padding:0; margin-top:15px}

.finish_list{ list-style-type:decimal; list-style-position:inside}
.finish_list li{ width:100%; line-height:35px; border-bottom:1px solid #f5f5f5}
.finish_pic{ margin-top:75px}
.finish_pic img{ margin-right:10px}
.col_3{ display:inline-block; width:33%;}

.location_content{ line-height:25px;}
.location_pic{ margin-top:45px}
.location_pic img{ max-width:100%}

.contact_info{ margin-top:25px}
.contact_info .qr{ float:left; margin-right:33px}
.contact_info ul{}
.contact_info ul li{ line-height:1; margin-bottom:12px}
.message{ margin-top:45px}
.message h4{ font-weight:normal; line-height:25px; margin-bottom:20px}
.message table{ width:53.2%; max-width:470px; border-collapse:separate; border-spacing:0px 13px;}
.message label{ display:block; width:100%; text-align:right}
.message input[type=text]{ width:275px; height:30px; border:1px solid #dadada; border-radius:3px; padding:0 10px; box-sizing:border-box}
.message textarea{ width:100%; height:94px; border:1px solid #dadada; border-radius:3px; padding:10px; box-sizing:border-box}
.message input[type=button]{ width:83px; height:30px; border:none; border-radius:3px; position:relative}
.message input[type=button]:active{ top:2px}
.message #submit{ background:url(../images/submit.jpg) no-repeat; background-size:100% 100%; color:#fff; margin-right:24px}
.message #reset{ background:url(../images/reset.jpg) no-repeat; background-size:100% 100%}
.contact_pic{ float:right; padding-top:13px; width:44.8%}
.contact_pic img{ width:100%}

.pro_contain{ overflow: hidden}
.pro_contain ul{ margin:0 -1%}
.pro_contain ul:after{ content:""; display:block; clear:both}
.pro_contain ul li{ width:23%; float:left; margin:1%; border:2px solid #f5f5f5; box-sizing:border-box}
.pro_contain ul li a{ display:block}
.pro_contain ul li .pic-wrap { position: relative; display: block; padding-bottom: 100%; height: 0; overflow: hidden; }
.pro_contain ul li img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: scale-down;}
.pro_contain ul li p{ text-align:center; line-height:45px; color:#646464; background:#f5f5f5}
.pro_contain ul li a:hover p{ background:#0d7da2; color:#fff}
.view{ display:none; width:35%; padding:0 13px 13px; box-sizing:border-box; position:fixed; top:150px; background:#fff; left:50%; margin-left:-10%; box-shadow:0px 0px 20px #646464;}
.view h4{ font-size:14px; line-height:45px}
.view .control{ float:right; padding-top:15px}
.view .control a{ display:inline-block; margin-left:20px}
.view .pic{ background:#f5f5f5; padding:35px 75px; text-align:center}
.view .pic img{ width:100%}
.view .view_btn{ position:absolute; width:70px; height:30px; box-shadow:0px 0px 10px #646464; top:40%; text-align:center; line-height:30px; background:#fff; color:#0d7da2}
.view #prev{ left:0; border-radius:0 3px 3px 0}
.view #next{ right:0; border-radius:3px 0 0 3px}
.Page{ display:none}

.footer{ height:56px; border:1px solid #e6e6e6; border-radius:5px; text-align:center; line-height:56px; color:#161616; margin-top:15px; background:#f5f5f5}
.category_yinxing{ display:none; position:fixed; width:100%; height:100%; top:0; left:0; z-index:800; background:rgba(0,0,0,0.3)}
.category_yinxing.on{ display:block}


/*---  响应式 ---*/
@media screen and (min-width: 1024px){
	.main .left{
		position: sticky;
		top: 40px;
		z-index: 2;
	}
}
@media screen and (max-width: 1024px) {
    .head{ padding-left:10px; padding-right:10px; text-align:center}
	#nav{ display:none;}
	#phone_nav{ display:block;}
	.head .iconfont{ display:block}
	#icon_category{display:block;}
	.head .logo{ margin-left:-30px}
	
	.main{ padding:0 1%}
	.main .left { width:40%; position:absolute; top:0; left:-40%; z-index:997; transition:all 0.5s ease}
	.main .right{ width:100%}	
}
@media screen and (max-width: 768px) {
	.left li{ margin-bottom:0}
	.pro_contain ul li{ width:31.33%}
	
	.view{ width:95%; left:2.5%; margin-left:0}
	#full{ display:none}
	.view .view_btn{ top:auto; bottom:15px}
	
	.finish_pic img{ margin:0l; width:100%}
	
	.col_3{ width:48.5%}
}
@media screen and (max-width: 640px) {
	.head{ height:auto}
	.logo span{ display:none}
	.logo img{ height:50px}
	
	.main .left{ width:80%; left:-80%}
	
	.contact_pic{ display:none}
	.message table{ width:100%}
	
}
@media screen and (max-width: 480px) {
	.container{ height:100%}
	.main{ min-height:auto;}
	.index .main{ min-height:auto; height:calc(100% - 110px)}
	.index .main .right{ height:100%}
	
	.index_about .content{ font-size:16px}
	
	.pro_contain ul li{ width:48%}
	
	.view .pic{ padding:35px 0}
	
	.message input[type=text]{ width:100%}
	
	.footer{ line-height:35px; height:auto}
	
	.contact_info .qr{ float:none; margin-bottom:15px}
	.contact_info ul li{ margin-bottom:0; line-height:25px}
	
	.col_3{ width:100%}
	
	.swiper-container{ height:100%}
}