@import url("common.css");
@import url("font/iconfont.css");
@media only screen and (min-width: 992px) {
	.swiper-container {position:relative; width:100%; overflow:hidden;}
	.swiper-container .pfocus img {width:100%; height:auto;}
	.swiper-container video {position:absolute; top:0; left:0; z-index:9;}
	.swiper-container .mfocus {display:none;}
	.swiper-container .slide-front {background:url(../imgs/tiepian.png); z-index:100002; width:508px; height:119px; position:absolute; left:4%; bottom:70px;}
	
	.ibar {font-size: 24px;color: #333;text-align: center; position:relative; height:24px; padding:50px 0 10px 0; border-bottom:60px solid #fff;}
	.ibar:before { content:""; position:absolute; width:0; height:0; bottom:-19px; left:50%; transform:translateX(-50%); border:6px solid; border-color:#298ed6 transparent transparent}
	.ibar:after { content:""; position:absolute; width:96px; height:3px; background-color:#298ed6; bottom:-8px; left:50%;transform:translateX(-50%)}
	
	.about {width:92%; margin:0 4%; height:300px;}
	.about p {width:800px; line-height:220%; padding-bottom:30px; text-align:left;}
	.about p:last-child {color:#999; font-size:13px;}
	.about span img {width:800px; height:300px; position:absolute; left:0; top:0;}
	.about span {width:calc(100% - 880px); max-width:800px; float:right; height:300px; position:relative; overflow:hidden;}
	
	.case .casesort {text-align:center; height:30px;}
	.case .casesort a {padding:5px 45px; display:inline-block; margin:0 10px; background-color:#ededed; color:#666;}
	.case .casesort a.active,.case .casesort a:hover {background-color:#298ed6; color:#fff;}
	.case .calselist {width:100%; height:auto; background-color:#fff;}
	.case ul {width:92%; margin:0 4%; margin-top:50px;}
	.case ul li {width:19.2%; margin-right:1%; margin-bottom:1%; height:calc(11% + 50px); position:relative; float:left;}
	.case ul li:nth-child(5n) {margin-right:0;}
	.case ul li a {display:block; width:100%; height:100%;}
	.case ul li a span {width:100%; height:calc(100% - 50px); position:absolute; left:0; top:0; overflow:hidden;}
	.case ul li a span img {width:100%; height:100%; position:absolute; left:0; top:0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out;}
	.case ul li a:hover img {width:120%; height:120%; position:absolute; left:-10%; top:-10%;}
	.case ul li i {position:absolute; background-color:rgb(255,255,255,0.5); color:#000; padding:0 15px; height:22px; line-height:22px; top:10px; right:10px; font-style:normal; font-size:12px; display:inline-block;}
	.case ul li a font {display:inline-block; margin-top:11vw; height:50px; line-height:50px; text-align:center; width:calc(100% - 20px); font-size:15px; background-color:#f1f1f1; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; overflow:hidden; padding:0 10px; white-space: nowrap;  text-overflow:ellipsis;}
	.case ul li a:hover font {background-color:#298ed6; color:#fff;}
	.case ul li a::before {display:inline-block; z-index:11; left:calc(50% - 20px); top:calc(5.5vw - 30px); background-size:100% 100%; content:''; position:absolute; transition: all 0.25s ease-out;content: '';width: 0;height: 0;border-top: 10px solid transparent;border-left: 16px solid white;border-bottom: 10px solid transparent;content: '';position: absolute;width: 0;height: 0;border-top: 30px solid transparent;border-left: 40px solid #298ed6;border-bottom: 30px solid transparent; z-index:10000; opacity:0;}
	.case ul li a:hover::before {opacity:0.8;}
	
	.news {width:92%; margin:0 4%; background-color:#fff;}
	.news>ul>li {width:calc(24.25% - 40px); margin-right:1%; float:left; text-align:left; background-color:#f5f5f5; padding:15px 20px 200px 20px; height:115px; position:relative;}
	.news>ul>li:last-child {margin-right:0;}
	.news>ul>li>a.tit {font-size:18px; font-weight:bold; color:#222; display:inline-block; height:22px; overflow:hidden; width:100%; white-space: nowrap;  text-overflow:ellipsis;}
	.news>ul>li>font {display:block; color:#999; font-size:12px; padding:6px 0;}
	.news>ul>li>span {height:50px; overflow:hidden; line-height:24px; color:#999; font-size:14px; display:inline-block;}
	.news>ul>li>a.img {width:100%; height:200px; position:absolute; display:inline-block; overflow:hidden; left:0; bottom:0;}
	.news>ul>li>a.img>img {width:auto; height:200px; position:absolute; left:0; bottom:0;}
	.news>ul>li:last-child {height:312px; padding:9px 20px;}
	.news>ul>li li {line-height:22px; height:44px; padding:9px 0;}
	.news>ul>li li a {font-weight:bold; color:#222; display:inline-block; height:22px; overflow:hidden; max-width:calc(100% - 80px);white-space: nowrap;text-overflow: ellipsis;}
	.news>ul>li li font {float:right; height:40px; line-height:normal; background-color:#afafaf; font-size:12px; text-align:center; width:60px; margin-left:20px; border-radius:5px; padding:2px 0; color:#fff;}
	.news>ul>li li font i {font-style:normal; display:block; font-size:18px;}
	.news>ul>li li span {display:block; height:22px; overflow:hidden; color:#999; overflow:hidden; max-width:calc(100% - 80px);white-space: nowrap;text-overflow: ellipsis;}
	.news>ul>li a:hover {color:#666;}
	
	.customer img {height:64px; width:auto;-webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none; transition: all 0.25s ease-out;}
	.customer a:hover img {-webkit-filter: grayscale(0%); 
        -moz-filter: grayscale(0%); 
        -ms-filter: grayscale(0%); 
        -o-filter: grayscale(0%); 
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);  
        _filter:none;}
	.customer {width:92%; margin:0 4%; height:150px;}
	.customer li {float:left; width:15%; margin:0 0.83%; overflow:hidden; padding-bottom:20px; text-align:center;}
}


@media only screen and (max-width: 991px) {
	.swiper-container {position:relative; width:100%; overflow:hidden; height:9rem;}
	.swiper-container .mfocus img {width:auto; height:9rem; margin-left:-5rem;}
	.swiper-container .pfocus,.swiper-container video {display:none;}
	.swiper-container .slide-front {background:url(../imgs/tiepian.png); background-size:auto 100% ; z-index:1; width:9rem; height:2rem; position:absolute; left:4%; bottom:1rem;}
	
	.ibar {font-size: 0.5rem; width:100%; color: #333;text-align: center; position:relative; height:0.8rem; padding:1rem 0 0.2rem 0; margin-bottom:1.2rem;}
	.ibar:before { content:""; position:absolute; width:0; height:0; bottom:-0.41rem; left:50%; transform:translateX(-50%); border:0.15rem solid; border-color:#298ed6 transparent transparent}
	.ibar:after { content:""; position:absolute; width:2rem; height:0.06rem; background-color:#298ed6; bottom:-0.15rem; left:50%;transform:translateX(-50%)}
	
	.about {width:92%; margin:0 4%;}
	.about p {width:100%; line-height:220%; padding-top:0.6rem; text-align:left;}
	.about p:last-child {color:#999; font-size:0.3rem;}
	.about span img {width:100%; height:3.45rem;}
	
	.case .casesort {display:none;}
	.case .calselist {width:100%; height:auto; background-color:#fff;}
	.case ul {width:100%;}
	.case ul li {width:50%; height:3.125rem; float:left;}
	.case ul li a {display:block; width:100%; height:100%;}
	.case ul li a span {width:100%; height:100%;}
	.case ul li a span img {width:100%; height:100%;}
	.case ul li i,.case ul li a font {display:none;}
	
	.news {width:100%; background-color:#fff;}
	.news>ul>li {text-align:left; margin-bottom:0.3rem; background-color:#f5f5f5;}
	.news>ul>li:last-child {display:none;}
	.news>ul>li>a.tit {font-size:0.4rem; font-weight:bold; color:#222; padding:0.5rem 0.4rem 0.2rem 0.4rem; display:inline-block;}
	.news>ul>li>font {display:block; color:#999; font-size:0.3rem; padding:0 0.4rem;}
	.news>ul>li>span {height:1rem; display:none; overflow:hidden; line-height:0.5rem; color:#999; font-size:0.35rem;}
	.news>ul>li>a>img {width:9.2rem; height:auto; margin:0.4rem;}
	
	.customer img {height:1.45rem; width:auto;-webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none; transition: all 0.25s ease-out;}
	.customer {width:9.7rem; margin:0 0.15rem;}
	.customer li {float:left; width:calc(4.55rem - 4px); text-align:center; margin:0 0.15rem; overflow:hidden; margin-bottom:0.3rem; text-align:center; border:1px solid #ddd;}
}