@charset "utf-8";

.banner { position:relative; padding:100px 0; background: linear-gradient(135deg,#2A2A72 0%,#5E35B1 100%); color:#fff; overflow: hidden; }
.banner .wrap { position:relative; z-index:5; display:flex; flex-wrap: wrap;  flex-direction:row; justify-content: space-between; align-items: center; }
.banner .txt { width:calc(85% - 300px); color:#fff; font-family: 'Nunito', sans-serif; font-weight: 900; font-size:56px; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); animation: fadeInUp 1s ease-out; }
.banner .pic { margin-right:6.5%; color:#fff; width: 300px; background-color: rgba(255, 255, 255, 0.2); border-radius: 20px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow:hidden; display: flex; justify-content: center; align-items: center; }

.banner .pic:hover {  transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); }
 
.circle { position: absolute; border-radius: 50%; opacity: 0.6; animation: float 6s ease-in-out infinite; z-index:1; }
.circle-1 { width: 100px; height: 100px; background-color:#FFC107; top: 10%; right: 5%; animation-delay: 0s; }
.circle-2 { width: 60px; height: 60px; background-color:#00ACC1; top: 30%; left: 10%; animation-delay: 1s; }
.circle-3 { width: 80px; height: 80px;  background-color:#00ACC1; bottom: 20%; right: 15%; animation-delay: 2s; }
.circle-4 { width: 40px; height: 40px; background-color:#FFC107; bottom: 30%; left: 20%; animation-delay: 3s; }

@media all and (max-width:1200px){
	.banner { padding:60px 0; }
	.banner .txt { width:calc(100% - 350px); font-size:40px; }
	.banner .pic { margin-right:0; width: 300px; }

	.circle-1 { width:80px; height:80px; }
	.circle-2 { width:40px; height:40px; }
	.circle-3 { width:60px; height:60px; }
	.circle-4 { width:20px; height:20px; }
}
@media all and (max-width:900px){
	.banner { padding:40px 0; }
	.banner .txt { width:calc(100% - 230px); font-size:24px; }
	.banner .pic { margin-right:0; width: 200px; }
}
@media all and (max-width:750px){
	.banner { padding:40px 0; }
	.banner .txt { width:55%; font-size:20px; }
	.banner .pic { margin-right:0; width:40%; }
}



.section1 { padding:100px 0; background:#FFF8E1; }
.section1 .hd { text-align:center; }
.section1 .hd .p1 { font-size:44px; color:#2A2A72; font-weight: 800; font-family: 'Nunito', sans-serif; }
.section1 .hd .p2 { width: 80px; height: 4px; margin:15px auto 0; background: linear-gradient(90deg, #00ACC1,#5E35B1); border-radius: 2px; }

.section1 .bd { margin-top:40px; }
.section1 .bd ul { display:flex; justify-content: space-between; flex-wrap: wrap; }
.section1 .bd ul li { width:23.12%; }
.section1 .bd ul li a { position: relative; display:block; height:100%; border-radius: 20px; padding: 40px 25px; text-align: center; color:#fff; transition: all 0.4s ease; overflow: hidden; cursor: pointer;  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); z-index:1; }
.section1 .bd ul li a:before { position: absolute; display:block; content:""; top: 0; left:0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: translateY(100%); transition: transform 0.4s ease; z-index: -1; }
.section1 .bd ul li .p1 { width:70px; height:70px; overflow:hidden; margin:0 auto; border-radius:100%; background-color:rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; }
.section1 .bd ul li .p1 img { max-height:35px; width:auto; }
.section1 .bd ul li .p2 { margin-top:25px; font-family: 'Nunito', sans-serif; font-size:30px; font-weight: 800; }
.section1 .bd ul li .p3 { margin-top:20px; line-height: 1.6; font-size:18px; }

.section1 .bd ul li a { background: linear-gradient(135deg, #00BCD4 0%, #00838F 100%); }
.section1 .bd ul li:nth-child(2) a { background: linear-gradient(135deg, #FFCA28 0%, #FF8F00 100%); color:#333; }
.section1 .bd ul li:nth-child(3) a { background: linear-gradient(135deg, #3F51B5 0%, #303F9F 100%); }
.section1 .bd ul li:nth-child(4) a { background: linear-gradient(135deg, #FF5252 0%, #D32F2F 100%); }

.section1 .bd ul li:hover a { transform: translateY(-15px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); }
.section1 .bd ul li:hover a:before { transform: translateY(0); }
.section1 .bd ul li:hover .p1 {  transform: scale(1.1); }
 
@media all and (max-width:1200px){
	.section1 { padding:60px 0; }
	.section1 .hd .p1 { font-size:34px; }
	.section1 .hd .p2 { width:60px; height: 4px; margin:15px auto 0; }

	.section1 .bd { margin-top:30px; }
	.section1 .bd ul li { width:23.12%; }
	.section1 .bd ul li a { border-radius:15px; padding:25px 15px; }
	.section1 .bd ul li .p1 { width:50px; height:50px; }
	.section1 .bd ul li .p1 img { max-height:25px; }
	.section1 .bd ul li .p2 { margin-top:15px; font-size:24px; }
	.section1 .bd ul li .p3 { margin-top:10px; line-height: 1.6; font-size:16px; }
}
@media all and (max-width:900px){
	.section1 { padding:40px 0; }
	.section1 .hd .p1 { font-size:20px; }
	.section1 .hd .p2 { width:50px; height:3px; margin:10px auto 0; }
	.section1 .bd ul li { width:49%; margin-right:2%; }
	.section1 .bd ul li:nth-child(2n) { margin-right:0; }
	.section1 .bd ul li:nth-child(n + 3) { margin-top:2%; }
	.section1 .bd ul li a { border-radius:10px; padding:25px 10px; }
	.section1 .bd ul li .p1 { width:40px; height:40px; }
	.section1 .bd ul li .p1 img { max-height:20px; }
	.section1 .bd ul li .p2 { margin-top:10px; font-size:18px; }
	.section1 .bd ul li .p3 { margin-top:10px; line-height: 1.6; font-size:14px; }
}

.section2 { position: relative; padding: 100px 0; color:#fff; text-align: center; background: linear-gradient(135deg,#2A2A72 0%,#5E35B1 100%); overflow:hidden; }
.section2:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="2"/></svg>'); background-size: 30px 30px; opacity: 0.5; z-index:1; }
.section2 .wrap { position:relative; z-index:2; }
.section2 .hd i { padding-bottom:15px; border-bottom:4px solid #FFC107; font-size:48px; display:inline-block; font-family: 'Nunito', sans-serif;  font-weight: 800; }
.section2 .bd { max-width: 800px; margin:40px auto 0; font-size:19px; line-height: 1.8; animation: fadeIn 1s ease-out; }
 
@media all and (max-width:1200px){
	.section2 { padding:60px 0; }
	.section2 .hd i { padding-bottom:15px; border-bottom:3px solid #FFC107; font-size:38px; }
	.section2 .bd { max-width: 800px; margin:30px auto 0; font-size:19px; line-height: 1.8; }
}
@media all and (max-width:900px){
	.section2 { padding:40px 0; }
	.section2 .hd i { padding-bottom:10px; border-bottom:2px solid #FFC107; font-size:20px; }
	.section2 .bd { max-width:100%; margin:30px auto 0; font-size:14px; line-height: 1.6; }
}

.section3 { padding: 100px 0; background:#FFF8E1; }
.section3 .hd { text-align:center; }
.section3 .hd .p1 { font-size:44px; color:#2A2A72; font-weight: 800; font-family: 'Nunito', sans-serif; }
.section3 .hd .p2 { width: 80px; height: 4px; margin:15px auto 0; background: linear-gradient(90deg, #00ACC1,#5E35B1); border-radius: 2px; }

.section3 .bd { margin-top:40px; }
.section3 .bd ul li { position:relative; float:left; width:24.25%; margin-right:1%; /*width:49.82%; margin-bottom:0.35%;*/ }
.section3 .bd ul li:nth-child(4n) { margin-right:0; }
.section3 .bd ul li:nth-child(n + 5) { margin-top:1%; }
.section3 .bd ul li .txt { position:absolute; left:0; right:0; bottom:0; padding:15px 30px 10px 30px; color:#fff; font-family:"Arial"; background:rgba(0,0,0,0.2); z-index:2; display:none; }
.section3 .bd ul li .txt .p1 { position:relative; font-size:18px; line-height:20px; }
.section3 .bd ul li .txt .p1:before { position:absolute; left:-10px; top:50%; transform: translateY(-50%); width:2px; height:12px; background:#f8c246; display:block; content:""; z-index:1; }
.section3 .bd ul li .txt .p2 { font-size:14px; line-height:20px; margin-top:10px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

.section3 .bd ul li:nth-child(9) { width:49.5%; }
.section3 .bd ul li:nth-child(11) { margin-right:0; }



.section3 .bd ul li .pic { overflow:hidden; }
.section3 .bd ul li .pic img { transition: all 0.6s; object-fit: cover; }
.section3 .bd ul li:hover .pic img { transform: scale(1.1)!important; }
.section3 .bd ul li:hover .txt { display:block; }

/*
.section3 .bd ul li:nth-child(2) { width:24.74%; margin-left:0.35%; }
.section3 .bd ul li:nth-child(3) { width:24.74%; margin-left:0.35%; }
.section3 .bd ul li:nth-child(5) { margin-left:0.36%; }
.section3 .bd ul li:nth-child(7) { width:24.74%; margin-left:0.35%; }
.section3 .bd ul li:nth-child(8) { width:24.74%; margin-left:0.35%; }
*/

@media all and (max-width:1200px){
	.section3 { padding:60px 0; }
	.section3 .hd .p1 { font-size:34px; }
	.section3 .hd .p2 { width:60px; height: 4px; margin:15px auto 0; }
	
	.section3 .bd { margin-top:30px; }
}
@media all and (max-width:900px){
	.section3 { padding:40px 0; }
	.section3 .hd .p1 { font-size:20px; }
	.section3 .hd .p2 { width:50px; height:3px; margin:10px auto 0; }
}
@media all and (max-width:750px){
	.section3 .bd ul li { width:49%; margin-right:2%; }
	.section3 .bd ul li:nth-child(4n) { margin-right:2%; }
	.section3 .bd ul li:nth-child(2n) { margin-right:0; }
	.section3 .bd ul li:nth-child(n + 3) { margin-top:2%; }
	
	.section3 .bd ul li:nth-child(9) { width:100%; margin-right:0; }
	.section3 .bd ul li:nth-child(10) { margin-right:2%; }
	
	/*
	.section3 .bd ul li { float:left; width:100%; margin-bottom:0.5%; }
	.section3 .bd ul li:nth-child(2) { width:49.5%; margin-left:0; }
	.section3 .bd ul li:nth-child(3) { width:49.5%; margin-left:0.5%; }
	.section3 .bd ul li:nth-child(5) { margin-left:0; }
	.section3 .bd ul li:nth-child(7) { width:49.5%; margin-left:0.5%; }
	.section3 .bd ul li:nth-child(8) { width:49.5%; margin-left:0.5%; }
	*/
	
	.section3 .bd ul li .txt { padding:15px 20px 10px 20px; }
	.section3 .bd ul li .txt .p1 { font-size:16px; }
}




@media all and (max-width:1200px){
	
}
@media all and (max-width:900px){
	
}