.main_con {width:100%; margin-top:100px; font-size:17px }


.vi {width:100%; height:100vh; position:relative; top:0; left:0;  margin-top:0}
.svg_wrap { position:absolute; top:25%; left:50%; margin-left:-650px;   width: 1300px;} 
.svg_wrap p {margin-top:200px; color:#fff;  font-size:1.8em; font-weight:300; text-shadow:2px 2px 10px rgba(0,0,0,.5)}

svg {
	  font-family:'Montserrat';
	position: absolute; line-height:0; 
	width:780px;  height:210px; margin-left:-20px
}
svg text {
	text-transform: uppercase;
	animation: stroke 5s infinite alternate;
	stroke-width: 2;
	stroke: #fff;
	font-size:250px;   font-family:'Montserrat'; font-weight:800
}
@keyframes stroke {
	0%   {
		fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1); }
	80%  {fill: rgba(255,255,255,0); stroke: rgba(255,255,255,1); stroke-width: 3; }
	100% {
		fill: rgba(255,255,255,1); stroke: rgba(255,255,255,0); 
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}


a.main_btn { display:inline-block; background-color: var(--main_c); border:1px solid var(--main_c); color:#fff; padding:15px 60px; border-radius:50px;   transition: all 0.2s ease-out; }
a.main_btn:hover {background-color:#50c747  }


.product_cate {width:100%;margin:0 auto; overflow:hidden;  position:absolute; bottom:0; left:0;  z-index:9999; }
.product_cate:before {width:50%; background-color:var(--main_c); position:absolute; top:0; height:100%; content:'' ; left:-650px; }

.product_cate div.flex { width:100%;  position:relative; z-index:99}
.product_cate div > div {width:30%; overflow:hidden;  position:relative;  box-sizing:border-box;   background-color:var(--main_c); display:flex; align-items:center; box-shadow:2px 2px 6px rgba(0,0,0,.25);  }
.product_cate div > div p {font-size:2.3em; line-height:1.1;  font-weight:700;  color:#fff; margin-left:50px}
.product_cate div > div p span {font-size:1rem; color:rgba(255,255,255,.9); font-weight:300; letter-spacing:1px; margin-left:5px; vertical-align:-2px }

.product_cate ul {width:70%;  margin-top:70px; display:flex; flex-wrap:wrap;  }
.product_cate ul li {width:25%; cursor:pointer; background-color:#fff;  padding:25px 20px; box-sizing:border-box; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-size:1.3em; display:flex; align-items:center; transition: background-color 0.2s ease-in; }
.product_cate ul li:hover {background-color:var(--main_c); color:#fff}
.product_cate ul li:hover:after {  color:#fff}
.product_cate ul li i {margin-left:auto; color:#333 }
.product_cate ul li:hover i {  color:#fff}

@media all and (max-width:1301px) {
		.svg_wrap { width:96%; left:4%; margin-left:0; } 

		svg { width:700px; height:150px;   }
		.svg_wrap p {margin-top:170px; }

}
@media all and (max-width:900px) {
 
		.vi { height:auto;  }
		.product_cate {position:static}
		.product_cate div > div {display:none  }
		.product_cate ul {width:100%; margin-top:0}
		.product_cate ul li {width:50%;  padding:20px 15px; font-size:1em}

		.svg_wrap {  left:4%; margin-left:0px; width:400px;  } 
		svg { width:300px; height:100px; margin-left:0 }
		svg text { font-size:250px;}
		.svg_wrap p {margin-top:100px; font-size:1.2em; letter-spacing:.5px}
}



/***********/


.main_product {width:100%; display:flex; max-width:1500px; margin:0 auto;  }
.main_product .tit {width:350px;  flex-shrink:0;   height:100px;  position:sticky; top:150px; left:0}
.main_product .tit h3 {font-size:3em; margin-bottom:10px}
.main_product .tit p {color:#333; font-size:1.05em; font-weight:300}
 

.main_product ul {width:100%;  display:flex; flex-wrap:wrap;  justify-content:space-between}
.main_product ul li {width:31.5%; color:#555; cursor:pointer; }
.main_product ul li:nth-child(n+4) {margin-top:30px}

.main_product ul li div { box-sizing:border-box; width:100%; padding-bottom:100%; text-align:Center;  margin-bottom:25px; border-radius:15px; transition: all 0.2s ease-out;}
.main_product ul li h4 {font-size:1.3em;  color:#111}


@media all and (max-width:1500px) {
 .main_product {padding:0 4%; box-sizing:border-box}

}

@media all and (max-width:900px) {
	.main_product {flex-wrap:wrap; }
	.main_product .tit {width:100%; height:auto;  position:static; }
	.main_product .tit h3 {font-size:2em; }

	.main_product .tit a {display:none}
	.main_product ul {margin-top:30px;}
	.main_product ul li {width:48%}
	.main_product ul li:nth-child(n+3) {margin-top:30px}
	.main_product ul li h4 {font-size:1.1em;  }


}

/***********/


.x_banner {width:100%; text-align:center;   position:relative; margin-top:130px; padding:90px 0;  background:url('../img/21478273.jpg') no-repeat bottom;  background-attachment: fixed; background-size:cover; color:#fff;  }
.x_banner h2 { font-size:3.5em; position:relative; z-index:9}
.x_banner p { font-size:1.1em; width:100%;  box-sizing:border-box;  text-align:center; margin:15px 0 35px 0; line-height:1.5;  position:relative; z-index:9}

@media all and (max-width:900px) {
    .x_banner {padding:100px 6%; box-sizing:border-box}
    .x_banner p { font-size:.96em;  }


}
 /***********/
 
.customer {width:100%;  font-size:1.1em; line-height:1.3; padding:110px 0; background:url('../img/customer_bg.png') no-repeat center; background-size:cover; color:#fff; position:relative;   }
.customer:after {background:rgba(0,0,0,.7); width:100%; height:100%; position:absolute; left:0; top:0; content:''}
.customer .in {position:relative; z-index:99}

.customer .call h3 {font-size:1.3em; font-weight:600;  margin-bottom:5px}
.customer .call h3 + b {font-size:2.4em; letter-spacing:1.5px;    margin-bottom:8px; width:100%; display:inline-block }
.customer .call p {font-weight:300; line-height:1.5}
 
 
.customer .link_box {margin-left:auto; display:flex}
.customer .link_box div {  background-color:var(--main_c); border-radius:10px; margin-left:20px; text-align:center; box-sizing:border-box; display:flex; align-items:Center; padding:0 55px;  cursor:pointer; transition: all 0.2s ease-out;}
.customer .link_box div:hover {background-color:#50c747}
.customer .link_box div h3 {font-weight:400; font-size:1.25em}
.customer .link_box div i {font-size:30px; margin-bottom:15px}


@media all and (max-width:900px) {
		.customer {padding:100px 6%; box-sizing:border-box; }
		.customer .in {padding:0; }
		.customer .call {width:100%; }
		.customer .call p {font-size:.9em}
		.customer .link_box {width:100%; margin-top:30px; margin-left:0}
		.customer .link_box div {margin-left:0; padding:30px; margin-right:10px; }
		.customer .link_box div h3 {  font-size:1em}


}



footer {margin-top:-1px}