@import url(ui.css);

::-webkit-scrollbar{ width:10px;}
::-webkit-scrollbar-thumb{ background-color: #666; border-radius: 10px; }
::-webkit-scrollbar-track{ background: #ddd; }

*{ margin:0 ; padding: 0; box-sizing: border-box; outline: none; }
html{scroll-padding-top: 70px;}
body{ font-size:16px; font-family: "microsoft yahei", Sans-serif; background:#fff;color:#374151}

a{color:#000;text-decoration:none}
a:hover{color:#374151}
ul{list-style:none;}

.container{ padding:0 15px; max-width:1230px; margin:0 auto; position: relative;}

.header{ background:#FFF; border-bottom: 1px solid #f0f1f2; position: fixed; left: 0; top:0; width: 100%; z-index: 998;}
.header-con{ display: flex; justify-content: space-between; align-items: center; }
.nav{ display: flex; }
.nav ul{ display: flex; margin-right: 40px; }
.nav li a{ display: block; padding:0 25px; line-height: 40px; border-radius: 5px; }
.nav li a:hover{ color: #207dfe; }
.download a{ background: #207dfe; color: #FFF;  display: inline-block; padding:0 25px; line-height: 40px; border-radius: 5px;}

.banner{ padding: 60px 0; background: url(../images/banner.png) no-repeat center / cover; margin-top: 70px; min-height: 650px; }
.banner .text{ float: right; max-width: 600px; }
.banner .text h2{ font-size: 36px; margin-bottom: 10px; }
.banner .text h2 span{ color: #207dfe; }
.banner .text p{ color: #4b5563; margin-bottom: 10px; line-height: 1.5; }
.banner .text li{ position: relative; line-height: 1.5; padding-left: 15px; }
.banner .text li:before{ position: absolute; left: 0; top:50%; transform: translateY(-50%); width: 5px; height: 5px; background: #666; border-radius: 50%; content:''; }
.banner .text .btns{ margin-top: 15px; }
.banner .text .btns a{ display: inline-block; padding: 0 20px; line-height: 40px; background: #207dfe; color: #FFF; border-radius: 6px; margin-right: 10px; }
.banner .text .btns a:nth-child(2){ background: #f19149; }
.banner .text .btns a:nth-child(3){ background: #ae5da1; }

.section{ padding: 45px 0;  }
.section-title{ text-align: center; font-size: 24px; font-weight: bold; margin-bottom: 30px; }

.in-ys{ background: #f9fafb; }
.in-ys li a{ display: block; text-align: center;  }
.in-ys li .img-center{ transition: 0.5s; }
.in-ys li h2{ font-size: 24px; font-weight: normal; margin:5px 0; }
.in-ys li p{ font-size: 14px; }
.in-ys li a:hover .img-center{ transform: rotate(-360deg); }

.in-gongneng{ max-width: 900px; margin:0 auto; }
.in-gongneng ul{ margin: 0 0 0 -30px;}
.in-gongneng li .items{ display: block; background: #f9fafb; border-radius: 10px; padding: 25px; margin:0 0 30px 30px; }
.in-gongneng li .icon{ background: #e8e8f8; width: 40px; height: 40px; border-radius: 5px; color: #4f46e5; padding: 5px;}
.in-gongneng li h2{ font-size: 18px; margin:8px 0; }
.in-gongneng li p{ color: #4b5563; height: 50px; }

.in-faq{ background: #f9fafb; }
.in-faq ul{ max-width:760px; margin:0 auto; }
.in-faq li .items{ background: #FFF; display: block; border-radius: 10px; margin-bottom: 15px; padding: 20px; box-shadow: 0 0 2px rgba(0,0,0,0.1); }
.in-faq li h2{font-size: 16px; margin-bottom: 8px;}
.in-faq li p{ color: #4b5563; }

.footer{ background: #207dfe; padding: 30px 15px; color: rgba(255,255,255,0.5); text-align: center; font-size: 16px; line-height: 1.8;}
.footer a{ color: #FFF; margin:0 10px;}

@media screen and (max-width: 768px) {
	.nav ul{ display: none; }
	.banner{ background: #ebf1f9; padding: 40px 0; min-height: 300px; }
	.banner .text h2{ font-size: 24px; }
	.section{ padding: 20px 0;  }
	.section-title{  font-size: 24px;  margin-bottom: 20px; }
	.in-ys li a{ margin-bottom: 25px; }
	.in-gongneng ul{ margin: 0 0 0 -15px;}
	.in-gongneng li .items{ margin:0 0 15px 15px; }
	.footer{padding: 15px;}
}