@charset "utf-8";
/* CSS Document */
/*banner_star*/
.slider .indicators .indicator-item {
	background-color: #666666;
	border: 3px solid #ffffff;
	-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.slider .slides {
	height: 690px;
	background: initial;
}
.slider .indicators .indicator-item.active {
	background-color: #ffffff;
}
.slider {
	width: 100%;
	margin: 0 auto;
	height: 100%
}
.slider .indicators {
	bottom: 10px;
	z-index: 100;/* text-align: left; */
	display: none;
}
.slider .slides li .caption {
	width: 80%;
	background: rgba(0,0,0,0.7);
	width: auto;
	padding: 25px 25px;
}
.slider .slides li .caption-2 {
	width: 80%;
	left: 14%;
}
.slider .slides li div img {
	height: auto;
	background-repeat: no-repeat;
	background-size: auto;
	background-position: left top
}
.slider .slides li div {
	width: 100%;
	padding-bottom: 8px;
}
.wen-left{
	margin-left: -12px;
	margin-top: 24px;
}
.slider .slides li div.caption3 img {
	background-position: right 25%
}
/*banner_end*/



.box_three ul li {
	width: calc(33.3% - 2px);
	float: left;
	position: relative;
	line-height: 0;
	margin: 0 1px;
	overflow: hidden
}
.box_three li>div, .box_three a {
	position: absolute;
	width: 100%;
	line-height: 0
}
.box_three li>div {
	text-align: center;
	bottom: 0;
	height:65px;
	background: rgba(44,150,216,0.8);
	color: #fff;
	font-size: 35px;
	transition: all 0.3s ease-in-out;
}

.box_three li>div .pic img{ height:1px; opacity: 0;transition: all 1s ease-in-out;}


.box_three li:hover>div {
	height: 100%;
	padding-top: 10%;
	background: rgba(44,150,216,0.5);
}

.box_three li:hover>div .pic img{  opacity: 1; height:auto}

.box_three li img {
	transition: all 0.3s ease-in-out
}
.box_three li:hover>img {
	-webkit-filter: blur(2px);
	filter: blur(2px);
	transform: scale(1.1)
}
.box_three a {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0
}
.about_zone {
	padding: 30px 0
}
.application {
	float: left;
	width: 544px
}
.application2 {
	display: none
}
.about_zone .info {
	width: calc(100% - 544px);
	float: left;
	padding: 100px 100px 0 50px
}
.about_zone h1 {
	margin: 0 0 10px 0;
	color: #539528;
	font-size: 52px;
	font-weight: bold; border: 0
}
.about_zone p {
	margin: 0 0 20px 0;
	font-size: 18px;
	font-family: "Numans", "NotoSansTC", \5FAE\8EDF\6B63\9ED1\9AD4, Arial, sans-serif;
}
.app_btn a {
	color: #fff;
	padding: 10px 15px;
	background: #2f2f2f
}
.app_btn a:hover {
	background: rgba(25,124,13,1.00)
}
.index-banner {background: url("../images/banner1.jpg");height: 690px;background-position: center center;}
.index-banner ul{}
.index-banner ul li{padding: 7% 15%;}
.index-banner ul li .caption{background: rgba(0,0,0,0.7);width: 62%;padding: 25px 25px;}

.news-banner {background: url("../images/banner-news.png");height: 690px;background-position: center center;}
.news-banner ul{}
.news-banner ul li{padding: 7% 15%;}
.news-banner ul li .caption{background: rgba(0,0,0,0.7);width: 60%;padding: 25px 25px;}
.mid-pro-1{background: #F2F2F2;}
.mid-pro-s1{margin-top: -13%;}
.mid-pro-text{text-align: center;padding: 5%;}
.mid-pro-text-en{text-align: center;padding: 5%;}
.mid-pro-text h1{font-size: 56px;letter-spacing: 6px;margin: 0;}
.mid-pro-text-en h1{font-size: 40px;letter-spacing: 2px;margin: 0;padding-bottom: 16px;}
.mid-pro-text h3{font-size: 36px;margin: 0;}
.mid-pro-text-en h3{font-size: 36px;margin: 0;}
.mid-pro-text h4{font-size: 26px;color: #1961AE}
.mid-pro-text-en h4{font-size: 26px;color: #1961AE}
.mid-pro-s2{text-align: right;margin-top: -7%;}
.mid-pro-s3{text-align: center;margin-top: -10%;}
.mid-pro-2{background: #000;padding: 100px 50px;}
.mid-pro-tech{width:33.333%;float:left;text-align: center;}
.mid-pro-tech h2{color: #fff;font-weight: 300;}
.mid-pro-tech p{color: #fff;width: 290px;display: block;margin: auto;line-height: 30px;margin-bottom: 20px;}
.mid-pro-tech boder2{color: #fff;border-style: solid;padding: 5px 5px;border-width: 1px;}
.mid-pro-3{height: 468px;padding: 20px 50px;}
.mid-pro-3 h1{text-align: center;}
.mid-pro-3 ul{}
.mid-pro-3 ul li{width: 25%;float: left;text-align: center;padding:0 20px;}
.news{background: #d1d1d1;height: 330px;}
.news p{font-size: 20px;}
.news boder2{border-style: solid;padding: 5px 5px;}
.mid-pro-4{background: #d1d1d1;padding: 20px 50px;}
.mid-pro-gobo{width:33.333%;float:left;text-align: center;padding: 60px 0px}
.go h4{font-size: 26px;color: #1961AE;}
.mid-pro-gobo p{color: #fff;width: 290px;display: block;margin: auto;line-height: 30px;margin-bottom: 20px;}
.go{text-align: center}
.go boder2{color: #000;border-style: solid;padding: 5px 5px;}
.mid-pro-4 h2{text-align: center;font-size: 36px;font-weight: 300;}
.mid-pro-gobo h2{color: #000;font-size: 28px;font-weight: 300;}
.mid-pro-5{width: 70%;display: block;margin: auto}
.mid-pro-5 h2{text-align: center;font-size: 58px;margin: 50px 0 0 0;}
.mid-pro-5 h3{text-align: center;font-size: 32px;margin: 5px 0 26px 0;}
.mid-pro-5 h4{text-align: center;font-size: 18px;margin: 0;}
.mid-pro-5 a{color: #1961AE;}
.mid-pro-shop{width:20%;float:left;text-align: center;margin-bottom: 50px;}
.arrow-down-design{display: none;}
.mid-pro-shop h3{text-align: center;line-height: 12px;font-size: 18px;color: #000;}


@media (max-width : 1700px) {
.box_three li:hover>div .pic{width:35%;margin:0 auto}	
}



@media (max-width : 1280px) {
.slider .slides {height: 500px}
.slider .slides li div img {background-size: 70%;}
.slider .slides li .caption {left: 10%}
.box_three li>div {font-size: 30px}
.filter-container-wrap {margin: 0 3.7%;}
.index-banner ul li .caption {width: 68%;}
}

@media (max-width : 1200px) {
.about_zone .info {
	padding: 80px 0px 0 30px
}
}

@media (max-width : 1000px) {
.box_three li>div {
	font-size: 25px;
	padding: 0;
	
}
	.box_three li:hover>div{padding-top:8%}
	.box_three li>div{height:50px}
.about_zone .info {
	padding: 50px 0 0 20px
}
.about_zone h1 {
	font-size: 48px
}
.slider .slides {
	height: 480px
}
.slider .slides li .caption {
	top: 20%;
	left: 5%
}
.slider .slides li .caption3 {
	top: 20%;
	right: 5%;
	left: auto
}
}
@media (max-width : 1024px) {
	.mid-pro-5 h4{font-size: 15px;}
	.filter-container-wrap {margin: 0 0.7%;}
	
}

@media (max-width : 900px) {
.slider .slides {
	height: 350px
}
.application {
	float: none;
	margin: 0 auto
}
.about_zone .info {
	width: 100%;
	float: none;
	padding: 20px 30px 0;
	text-align: center
}
	
	
	.box_three li:hover>div{padding-top:3%}
}
@media (max-width : 812px) {
		.mid-pro-tech{width: 33.3%;margin-bottom: 8%;}
}
@media (max-width : 768px) {
	.mid-pro-5 h4{font-size: 12px;width: 101%;}
	.slider .slides li .caption {top: 3%;left: 7%;padding: 12px;}
	s1{font-size: 20px;}
	s2 b{font-size: 20px;}
	.wen-left{margin-left: -12px;margin-top: 4px;}
	.slider .slides li div s2{font-size: 8px;}
	.banner{margin-bottom: 0px;}
	.mid-pro-2{padding: 50px 0px;}
	.mid-pro-tech p{width: 220px;}
	.mid-pro-s1{margin-top: -5%;width: 40%;}
	.mid-pro-s2{width: 40%;margin-left: 68%;}
	.mid-pro-s3{width: 30%;margin: 0 auto;margin-top: -15%;}
	.filter-container-wrap {margin: 0 0.9%;}
}
@media (max-width : 600px) {
.application {
	display: none
}
.slider .slides {
	height: 260px
}
.application2 {
	display: block;
	text-align: center
}
.application2 h2 {
	font-weight: bold;
	font-size: 30px;
	margin: 0 0 15px 0;line-height: 100%
}
	.about_zone h1{ font-size:30px;margin-bottom:15px; line-height: 100%; border:0}
	
.application2 ul li {
	padding: 15px
}
.application2 ul li a { font-size:20px;color: #fff; 
}
.application2 ul li.app1 {
	background: #573891
}
.application2 ul li.app2 {
	background: #b81c28
}
.application2 ul li.app3 {
	background: #ea5b18
}
.application2 ul li.app4 {
	background: #f08915
}
.application2 ul li.app5 {
	background: #f9bf11
}
.application2 ul li.app6 {
	background: #6eb93c
}
.application2 ul li.app7 {
	background: #43afe2
}
.application2 ul li.app8 {
	background: #3379bd
}
	
.application2 ul li:hover{ -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000; }
	.box_three li>div{ font-size:30px}
	.banner{margin-bottom:10px}	
	.slider .slides li div img{background-size: 90%;}
	.slider .slides li .caption2 {
	top: 5%;
	left:10%
}
	.box_three li:hover>div{padding-top:8%}
	.box_three li>div{height:60px}
	.box_three ul li{float:none;width:90%;margin:0 auto 15px }
	
	.slider .slides li .caption {top: 3%;left: 7%;padding: 12px;}
	s1{font-size: 20px;}
	s2 b{font-size: 20px;}
	.wen-left{margin-left: -12px;margin-top: 4px;}
	.slider .slides li div s2{font-size: 8px;}
	.banner{margin-bottom: 0px;}
	.mid-pro-tech{width: 100%;padding: 30px;}
	.mid-pro-2{padding: 20px;}
	.mid-pro-4{padding: 8px;}
	.mid-pro-4 h2{font-size: 20px;}
	.mid-pro-gobo{width: 100%;padding: 10px;}
	.mid-pro-4 .go a{font-size: 18px;}
	.mid-pro-text h1{font-size: 24px;}
	.mid-pro-text h3{font-size: 24px;}
	.mid-pro-text h4{font-size: 18px;}
	.mid-pro-s1{margin-top: -5%;text-align: center;}
	.mid-pro-s2{width: 65%;margin: 0 auto;}
	.mid-pro-s3{width: 60%;margin: 0 auto;}
	.mid-pro-5 h2{font-size: 28px;margin: 0;padding: 5px;}
	.mid-pro-5 h3{font-size: 22px;}
	.mid-pro-5 h4 {font-size: 18px;}
	.mid-pro-6{margin-bottom: 30px;}
	.mid-pro-shop{width: 100%;margin: 0;}
	.arrow-right-design{display: none;}
	.arrow-down-design{display: block;}
	.mid-pro-s1{width: 100%;}
	.mid-pro-5 h4{}
	.slider {width: 50%;}
	
}
@media (max-width : 480px) {
	.about_zone .info{padding:50px 0 0}
	.slider .slides li img{background-position:75%}
	.box_three li:hover>div{padding-top:5%}
}
@media (max-width : 414px) {
	.index-banner ul li {padding: 40% 0%;}
	.index-banner ul li .caption {width: 96%;}
	.news-banner ul li {padding: 30% 0%;}
	.news-banner ul li .caption {width: 96%;}
	s1 {font-size: 24px;}
	s2 {font-size: 20px;}
	s1-en {font-size: 18px;}
	.wen-left {margin-top: 18px;}
	.mid-pro03-news ul li {width: 100%;margin: 5% 0;padding: 25px 50px 20px 50px;}
	.news-p1 b {font-size: 30px;}
	.filter-container-wrap {margin: 0 7.7%;}
}
@media (max-width : 375px) {
	.index-banner ul li {padding: 40% 0%;}
	.index-banner ul li .caption {width: 96%;}
	.news-banner ul li {padding: 30% 0%;}
	.news-banner ul li .caption {width: 96%;}
	s1 {font-size: 24px;}
	s2 {font-size: 20px;}
	s1-en {font-size: 18px;}
	.wen-left {margin-top: 18px;}
	.mid-pro03-news ul li {width: 100%;margin: 5% 0;padding: 25px 50px 20px 50px;}
	.news-p1 b {font-size: 30px;}
	.filter-container-wrap {margin: 0 7.7%;}
}
@media (max-width : 360px) {
	.index-banner ul li {padding: 40% 0%;}
	.index-banner ul li .caption {width: 98%;}
	.news-banner ul li {padding: 30% 0%;}
	.news-banner ul li .caption {width: 98%;}
	s1 {font-size: 24px;}
	s2 {font-size: 20px;}
	s1-en {font-size: 18px;}
	.wen-left {margin-top: 18px;}
	.mid-pro03-news ul li {width: 100%;margin: 5% 0;padding: 25px 50px 20px 50px;}
}
@media (max-width : 320px) {
	.index-banner ul li {padding: 40% 0%;}
	.index-banner ul li .caption {width: 98%;}
	.news-banner ul li {padding: 30% 0%;}
	.news-banner ul li .caption {width: 98%;}
	s1 {font-size: 24px;}
	s2 {font-size: 20px;}
	s1-en {font-size: 16px;}
	s2-en {font-size: 16px;}
	.wen-left {margin-top: 18px;}
	.mid-pro03-news ul li {width: 100%;margin: 5% 0;padding: 25px 50px 20px 50px;}
}