﻿/* CSS Document */
/*--------------------*/
.MobleBig { width: 100%; display: none;}
.MobleNav { background: #edf0f2; display: block; height: 65px;  }
.MobleNav .lltab {  padding: 15px 0;  }
.MobleNav .lltab h4 { font-size: 27px;  font-weight: 800; line-height: 35px; display: block; width: 20%; float: left; padding: 0 0 0 1%; }
.MobleNav .lltab h4 a { color: #333; text-decoration: none; }
.MobleNav .lltab h5 { display: block; font-size: 23px;  display: block; width: 150px; float: right; line-height: 35px;  }
.MobleNav .lltab h5 img { vertical-align: middle; }
.MobleNav .lltab h5 a { color: #7dc03b; text-decoration: none; }
.MobleNav .lltab .Huv { width: 35px; height: 35px; float: right; cursor: pointer; }
.Matter {  background: #202020; padding: 20px 0; display: none; position:absolute; top: 65px; z-index: 10; left: 0; width: 100%;  color: #fff; }
.Matter .close { width: 19px; height: 19px; float: right; margin: 0 5% 0 0; cursor: pointer;  }
.Matter ul { font-size: 23px; padding: 20px 5% 0 5%; }
.Matter ul li { list-style: none; border-bottom: 1px solid #4d4d4d; padding: 25px 0 15px; }
.Matter ul li:last-child { border:none;  }
.Matter ul li a { color: #fff; text-decoration: none; }
/*----------------------------------------------------------------------------------------------------------------------------------------*/

.main-banner {background:radial-gradient(50% 100% at 60% top,#fff3ed 60%,transparent);position: relative;min-height: 566px;}
.main-banner::after{content:"";background: url(../img/about-pic1.png) no-repeat center/920px 551px;width: 920px;height: 551px;left: 43%;top: 0;position: absolute;}
.main-banner .detail { width:1220px; margin:0 auto; height:410px; padding:0 30px;position: relative;}
.main-banner .detail h1 { font-size:57px;padding-bottom:25px; line-height:1.1;color: #000;}
.main-banner .detail p { padding:10px 0;font-size: 19px;line-height: 1.8;}
.main-banner .detail .txt { width:500px; float:left; padding:110px 0 0 50px;}
/* CSS Document */
.main-vision {background: url(../img/about-bg2.png) no-repeat center bottom;padding:0 0 120px;}
.main-vision .detail { width:1220px; margin:0 auto;  }
.main-vision h2 { font-size:45px;color: #000; padding:0 0 50px;line-height: 1.1;text-align: center;}
.vision-content{display: flex;align-items: flex-start;position: relative;justify-content: space-between;min-height: 420px;}
.vision-content .item-txt{background: #fff;border-radius: 30px;padding: 30px 30px 25px 35px;animation: shadowCycle  1s infinite alternate,bounceCycle 1s 2s;}
@keyframes shadowCycle {
  from {
     box-shadow: 0px 7px 35px 0px rgba(246, 234, 227, 0.3);
  }
  to {
     box-shadow: 0px 7px 35px 0px rgba(246, 234, 227, 0.9);
  }
}
@keyframes bounceCycle {
  from {
     transform: scale(0.6);
  }
  to {
     transform:  scale(1);
  }
}
.vision-content .vision-item1{width: 325px;}
.vision-content .vision-item2{width: 363px;align-self: flex-end;}
.main-vision .detail .item-txt p{ padding:10px 0;font-size: 19px;}
.main-vision .detail .item-txt i {font-size: 17px;  font-style:normal; display:block;padding-top: 10px;}
.vision-pic img{border-radius: 35px;}
.vision-pic1{position: absolute;bottom: 0;left: 0;}
.vision-pic1 .img1{position: absolute;left: -25px;bottom: 65px;}
.vision-pic1 .img2{position: absolute;left: 170px;bottom: -5px;}
.vision-pic2{position: absolute;top: 0;right: 0;}
.vision-pic2 .img4{position: absolute;right: 163px;top: 0;}
.vision-pic2 .img5{position: absolute;right: -20px;top: 60px;}

/* CSS Document */
.main-product {}
.main-product .detail { width:1220px; margin:0 auto; height:682px;position:relative;}
.main-product .detail::before{content: url(../img/about-bg3.png);position: absolute;left: -75px;top: -40px;z-index: -1;}
.main-product .product-content{display: flex;justify-content: space-between;}
.main-product .detail .product-lines { width:800px;}
.main-product .detail h2 { font-size:45px; color:#000; padding:0 0 40px;line-height: 1.1;}
.main-product .detail .product-lines ul { list-style:none;}
.main-product .detail .product-lines ul li {display: flex;align-items: center;gap:20px; margin-bottom: 20px; padding:30px 0 30px 25px;font-size: 16px; line-height:30px;background: #fff;border-radius: 10px;box-shadow: 0px 0 35px 0px rgba(246, 234, 227, 0.6); }
.main-product .detail .product-lines ul li i { display:block;font-style: normal;}
.main-product .detail .product-lines h6 { font-size:19px; padding:10px 0 0 100px;}
.main-product .detail .product-connect {box-shadow: 15.647px -20.765px 38px 0px rgba(246, 234, 227, 0.33);border-radius: 10px;padding: 0 50px;display: flex;align-items: center;}
.main-product .detail .product-connect h3 { font-size:21px; padding:20px 0 20px 0; }
.main-product .detail .product-connect .txt {}
.main-product .detail .product-connect .txt .subscribe a {display: flex;align-items: center;justify-content: space-evenly;font-size: 21px; border: 1px solid currentColor;color: #ff6742; border-radius: 10px;text-decoration: none;height: 47px;}
.main-product .detail .product-connect .txt .subscribe a::after{content: "";border-left: 12px solid #ff6742;border-top: 7px solid transparent;border-bottom: 7px solid transparent;}
.main-product .detail .product-connect .txt .share{display: flex;justify-content: space-between;}
.connect-txt{position: relative;width: 272px;box-sizing: border-box; margin: 20px 0;}
.connect-txt .t{background:#ffefe7;display: inline-block;color: #ff7c34;font-size: 17px;padding:17px 20px 0; border-radius: 10px 10px 0 0;transform: translateY(10px)}
.connect-txt .t span{border-bottom: 1px solid #f2e0d6;padding-bottom: 10px;}
.connect-txt p{color: #616161;background:#ffefe7;border-radius:0 10px 10px;padding: 30px 20px 15px; }

#small_banner{position:fixed; right:30px; bottom:280px; display:none; cursor:pointer;}
#bigg_banner{width:330px; height:368px; position:fixed; right:30px; bottom:280px; background:url(../../banner/s_big.png) no-repeat center;}
#bigg_banner a#big_banner{float:right; width:20px; height:20px;}
#bigg_banner a.link{height:100%; display:block;}

@media (max-width: 979px) {
    .detail,.Details{ width:auto; margin:0 auto;padding: 0 10px;box-sizing: border-box;}
	.Navigate{display: none;}
	/* `````````````````````````````````````````````````` */
	.main-banner{min-height: inherit;}
	.main-banner::after{display: none;}
	.main-banner .detail {width: 100%;height: auto;padding: 0 10px;}
	.main-banner .detail h2 {font-size: 1.3425rem;line-height: 2rem;font-weight: 600;padding-bottom: 0;}
	.main-banner .detail .txt {float: none;width: 100%;padding: 60px 0 30px;text-align: center;}
	
	/* `````````````````````````````````````````````````` */
	.main-vision .detail {width: auto;padding: 30px 10px;}
	.vision-pic1,.vision-pic2{display: none;}
	.vision-content{flex-wrap: wrap;justify-content: center;gap:10px;}
	.vision-content .vision-item1{width: auto;}
	.vision-content .vision-item2{width: auto;}
	/* `````````````````````````````````````````````````` */
	.main-product .detail {height: auto;width: 100%;padding: 30px 0;}
	.main-product .detail .product-lines {width: auto;}
	.main-product .detail .product-lines h3 {font-size: 1.3425rem;line-height: 2rem;padding: 0; }
	.main-product .detail .product-lines ul {padding: 0;}
	.main-product .detail .product-lines h6 {padding: 15px 0;}
	.main-product .detail .product-connect {padding:30px 0 0 20px;}
	.main-product .detail .product-connect h3 {font-size: 1.3425rem;line-height: 2rem;}
	.main-product .detail .product-connect .txt {padding-left: 0;}
}

@media (max-width: 767px) {
	.main-product .product-content{flex-direction: column;padding: 0 10px;}

}

@media (max-width: 479px) {

}