@CHARSET "UTF-8";
.img-responsive
{
	display: block;
	max-width: 100%;
	height: auto;
}
.navbar{background-color: #f2f2f2;display: block;}
.navbar .nav-list{	z-index: 0;	display: block;}
.navbar .nav-list>li{float: left; width: 12%; }
.navbar .nav-list>li:first-of-type {background-color: #f00;}
.navbar .nav-list>li:first-of-type a { color: #fff; }
.navbar .nav-list>li:hover { 
	background-color: #f00; transition: all 0.5s linear;
	-moz-transition:  all 0.5s linear;  
	-webkit-transition:  all 0.5s linear;  
	-o-transition:  all 0.5s linear;   
}
.navbar .nav-list>li:hover>a { color: #fff; }
.navbar .nav-list>li>a{ display: block; font-size: 17px;  color: #333; line-height: 50px; text-align: center;   text-align: right;
	padding-right: 30px;}
	.navbar .nav-list>li>a:hover { color: #fff; }
	.navbar .nav-list>li ul {  width: 144px;  display: none; background-color: #fff;   position: absolute; z-index: 10;}
	.navbar .nav-list>li:hover>a+ul { display: block; }
	.navbar .nav-list>li>ul>li { display:block; width: 100%;  text-align: center; border-bottom: 1px solid #ECECEC;
	}
	.navbar .nav-list>li>ul>li a { height: 40px; line-height: 40px;}
	.navbar .nav-list>li>ul>li:hover { background-color: #FF7C00; }
	.navbar .nav-list>li>ul>li:hover>a { display: block; color: #fff; font-size: 15px; }
	.navbar .nav-list .top_line { width: 1px; line-height: 50px; }
	.navbar input:checked~.nav-list {
		position: absolute;
		display: block;
		background-color: #34495E;
		z-index: 999;
	}
	.navbar label{	display: none;}
	.navbar .nav-toggle{	display: none;}
	.navbar input:checked~.nav-list li{	clear: both;background-color: #EF6824; width: 100%;     border-bottom: 1px solid #EF9466;}
	.navbar label{	display: none;}
	.navbar .nav-toggle{	display: none;}
	.navbar .nav-toggle{	display: none;}

	/*当屏幕宽度 >= 300px时 运行这段代码*/
	@media screen and (max-width: 768px){ 
		body {			
			max-width: 100%;	
		}
		.sun_head .logo { width: 90%; }
		.container { width: 100%; }
		#container { width: 100%; }
		.sun_top {
			display: none;
		}
		.logo img { width: 95%; }
		.top_tel { display: none; }
		.top_line { display: none; }
		.video {     
			width: 100%;
			height: auto; 
			background-color:transparent;
			clear:both;
			margin-right:0px;
		}
		.sun_case .sun_case_ll li {
			float: left;
			width: 44%;
			height: 119px;
			position: relative;
			margin: 10px 10px;
		}
		.sun_case .sun_case_ll li img { width: 100%; height: auto; }
		.box-center, .sun_service {
			width: 100%;
			position: relative;
			left: 0;
			margin-left:0;
		}
		.sun_service {
			background: url(../images/service_bg.jpg) top center no-repeat;
			box-sizing: border-box;
			height: 415px;
			padding-top: 20px;
		}
		.sun_service .service_lis {
			margin-top: 0px;
			font-size: 0;
		}
		.sun_service .service_lis ul {
			margin-right: 0; 
			width: 98%;
			margin: 0 auto;
		}
		.sun_service .service_lis li {
			width: 105px;
			padding:5px;
			float: left;
		}
		.sun_service .service_lis li .img {
			display: block;
			width: 99px;
			height: 99px;
			margin: 0 auto;
		}
		.youshi {
			display: none;
		}
		.sun_gcal .gcal_lli li {
			float: left;
			margin: 9px 9px;
			position: relative;
			width: 45%;
			height: 160px;
			overflow: hidden;
		}
		.sun_gcal .gcal_lli li .img { width: 100%; height: auto; }
		.sun_gcal .gcal_lli li:first-child .img, 
		.sun_gcal .gcal_lli li:nth-of-type(5) .img {
			display: block;
			width: 100%;
			height: auto;
		}
		.sun_gcal .gcal_lli li h3 { 
			opacity: 1;
			transform: scale(1); 
		}
		.sun_news .news_box {
			width: 100%; 
			margin-right: 0; 
		}
		.sun_news .news_lll li a {
			font-size: 14px;
			color: #666666;
			width: 70%;
			display: inline-block;
			overflow: hidden;
			height: 33px;
			line-height: 52px;
		}
		.news_box2 {		
			margin-top: 20px;		
		}
		.sun_news .news_tit a {
			padding-right: 10px;
		}
		.sun_news .news_tit {
			background: url(../images/news_li_bg.jpg) left 25px center no-repeat;
			padding-left: 48px;
		}
		.sun_tl {
			background: #272828;
			padding:10px 2%;
		}
		.sun_tl .tl_nav {
			width: 31%;
			margin-right: 10px;
			text-indent: 15px;
		}
		.tl_links {
			display: none;
		}
		.sun_tl .tl_contact {
			width: 60%;
			margin-right: 0px;
			text-indent: 15px;
		}
		.tl_ewm { display: none; }
		.left { width: 100%; }
		.right {
			clear: both;
			width: 96%;
			margin: 0 auto;
			float: none;
		}
		.sort li {
			width: 45%;
			float: left;
			margin: 5px 8px;
		}
		.sort li a {
			text-align: center;
			text-indent: 0;
		}
		.sort .layer2 { display: none; }
		.sitemp {
			width: 93%;
		}
		.site { display: none; }
		.n_banner { display: none; }
		.n_banner_sm { display: block;  width: 100%; height: 120px; }
		.n_banner_sm img { height: 120px; width: 100%; }
		.right .content {
			padding:10px;
		}
		.right .content img {
			display: block;
			max-width: 100%;
			height: auto;
		}
		.product_list li {
			margin-left: 0px;
			margin-right: 5px;
		}
		.product_list li a.img img {
			width: 148px;
			height: 136px;
		}
		.case_list li {
			margin-left: 0px;
			margin-right: 5px;
		}
		.case_list li a.img img{
			width: 148px;
			height: 136px;
		}
		.news_list li .new_list_time {
			position: relative;
		}
		.pages ul { width: 100%; }
		.pages ul li, .pages ul li a {
			padding: 3px; 
			margin: 3px;
			width: 36px; 
		}
		.city_all {
			width: 100%;
		}
		.pages .pages_input {
			display: none; 
		}


	}
	/*当屏幕宽度 >= 480px时 运行这段代码*/
	@media (min-width:768px) and (max-width: 1200px) {
		body {
			
		}
		.container , #container {
			width: 98%;
			margin: 0 auto;
		}
		.navbar .nav-list>li>a {
			text-align: center;
			padding-right: 0px;
		}
		.box-center, .sun_service {
			width: 100%;
			position: relative;
			left: 0;
			margin-left: 0;
		}
		.sun_service .service_lis li {
			padding-right: 5%;
		}
		.sun_gcal .gcal_lli li {
			width: 31%;
			height: 190px;
			overflow: hidden;
		}
		.sun_gcal .gcal_lli li .img { width: 100%; height: auto; }
		.sun_gcal .gcal_lli li:first-child .img, 
		.sun_gcal .gcal_lli li:nth-of-type(5) .img {
			display: block;
			width: 100%;
			height: auto;
		}
		.sun_gcal .gcal_lli li h3 { 
			opacity: 1;
			transform: scale(1); 
		}
		.sun_news .news_box {
			width: 48%;
		}
		.right { width: 70%; }
		.left { width: 24%; }
		.top_tel {
			width: 15%;
		}
		.sun_head .logo {
			width: 80%;
		}
		.pages ul li, .pages ul li a {
			padding: 2px 5px;
			width: 55px;
		}

	}
	/*当屏幕宽度 <= 480px时 运行这段代码*/
	@media screen and (min-width:1200px) {
		body {

		}
	}



	@media screen and (max-width: 768px) {
		.navbar .nav-toggle{
			display: none;
		}
		.navbar label{
			display: block;
			z-index: 4;
		}
		.navbar .nav-list{
			display: none;
			margin-left: 0px;
			width: 100%;
		}
		.navbar .nav-list li{
			margin-left: 0px;
		}
		.navbar  .menu-icon{
			display: block;
			width: 36px;
			height: 26px;
			line-height: 0;
			text-align: center;
			position: absolute;
			top: 32px;
			right: 10px

		}
		.navbar  .menu-icon>svg path{
			fill: black;
		}
		.navbar  label[for="nav-toggler"] {
			display: block;
			float: left;
			width: 36px;
			height: 36px;
			z-index: 2;
			cursor: pointer;
		}
		.navbar .nav-list>li ul {

		}
	}