@charset "utf-8";

.banner { position:relative; width:100%; }

.swiper-container-1 .swiper-slide { position:relative; width:100%; overflow:hidden; }
.swiper-container-1 .swiper-slide .img01 { width:100%; height:100vh; object-fit: cover; }
.swiper-container-1 .swiper-slide .img02 { display:none; }

.swiper-pagination-1 { position:absolute; bottom:30px; left:0; right:0; text-align:center; z-index:9;  }
.swiper-pagination-1 .swiper-pagination-bullet { width:10px; height:10px; margin:0 7px;  border-radius:100%; background:rgba(255,255,255,0.4); opacity:1; }
.swiper-pagination-1 .swiper-pagination-bullet-active { width:45px; border-radius:10px; }
 
.mouse-tip {  position: absolute;  width: 24px; height:40px; border: 2px solid #fff;  border-radius: 24px; left: 50%;  bottom: 70px; z-index: 5; transform: translate(-50%,0); overflow: hidden }
.mouse-tip:before {  content: ''; position: absolute;  width: 2px; left: 50%; margin-left: -1px;  top: 3px; height: 2px;  background-color: #fff; animation: mouse 2s ease infinite; -webkit-animation: mouse 2s ease infinite; }

@media all and (max-width:1200px){
	.swiper-container-1 .swiper-slide .img01 { display:none; }
	.swiper-container-1 .swiper-slide .img02 { display:block; }

	.swiper-pagination-1 { bottom:30px; }
	.swiper-pagination-1 .swiper-pagination-bullet-active { width:25px; } 
}

.mBtn { display: inline-block; width:150px; text-align: center; background: #009FE8; transition: all 0.6s; border-radius:25px; backdrop-filter: blur(4px); }
.mBtn i { display: inline-block; font-size: 16px; padding-right:30px;  line-height: 37px; color: #fff; background: url(ico02.svg) no-repeat center right;}

.mBtn01 { background: linear-gradient(262deg, #009FE8 3.07%, rgba(0, 0, 0, 0.10) 47.37%, #139349 98.99%); }

.mBtn:hover { background:#1f2a66; }

@media all and (max-width:1680px){
	.mBtn i { font-size: 14px; }
}
@media all and (max-width:1200px){
	.mouse-tip { display:none; }
}
@media all and (max-width:750px){
	
}


.aArea { padding: 120px 0; text-align:center; line-height:1.1; color:#000; background:url(aArea.jpg) no-repeat center top; background-size: 100% 100%; }
.aArea .p1 { font-size: 50px; }
.aArea .p2 { font-size: 16px; margin-top: 40px; line-height: 2; }
.aArea .p3 { width:1130px; margin:90px auto 0; }
.aArea .p3 ul { display:flex; flex-wrap: wrap;  flex-direction:row; justify-content: space-between; }
.aArea .p3 ul li .a1 { font-size: 24px; color:#009FE8; }
.aArea .p3 ul li .a1 i { font-size: 66px; }
.aArea .p3 ul li .a1 em { position:relative; top:-30px; z-index:2; }
.aArea .p3 ul li:nth-child(1) .a1 em { top:auto; }
.aArea .p3 ul li .a2 { font-size:16px; margin-top: 10px;}
.aArea .p4 { margin-top: 80px;}

@media all and (max-width:1680px){
	.aArea { padding: 80px 0; }
	.aArea .p1 { font-size:38px; }
	.aArea .p2 { font-size: 14px; margin-top: 30px; line-height: 25px; }
	.aArea .p3 { width:1000px; margin:60px auto 0; }
	.aArea .p3 ul li .a1 { font-size: 20px; }
	.aArea .p3 ul li .a1 i { font-size:44px; }
	.aArea .p3 ul li .a1 em {  top:-20px; }
	.aArea .p3 ul li:nth-child(1) .a1 em { top:auto; }
	.aArea .p3 ul li .a2 { font-size:14px; margin-top: 10px;}
	.aArea .p4 { margin-top: 60px;}
}
@media all and (max-width:1200px){
	.aArea { padding: 60px 0; }
	.aArea .p1 { font-size:28px; }
	.aArea .p2 { font-size: 14px; margin-top: 30px; line-height: 25px; }
	.aArea .p3 { width:90%; margin:40px auto 0; }
	.aArea .p3 ul li .a1 { font-size: 16px; }
	.aArea .p3 ul li .a1 i { font-size:30px; }
	.aArea .p3 ul li .a1 em {  top:-10px; }
	.aArea .p3 ul li:nth-child(1) .a1 em { top:auto; }
	.aArea .p3 ul li .a2 { font-size:14px; margin-top: 10px;}
	.aArea .p4 { margin-top: 40px;}
}
@media all and (max-width:900px){
	.aArea { padding: 40px 0; }
	.aArea .p1 { font-size:20px; }
	.aArea .p2 { font-size: 14px; margin-top: 20px; line-height: 25px; }
}
@media all and (max-width:750px){
	.aArea .p3 ul li { width:50%; text-align: center; }
	.aArea .p3 ul li:nth-child(n + 3) { margin-top: 20px; }
	.aArea .p3 ul li .a1 i { font-size:30px; }
}

.bArea { position: relative; overflow:hidden; }
.bArea .pic .img03 { position:absolute; top:0; left:0; width:100%; transition: all 0.6s; z-index:2; }
.bArea .pic .img02 { display: none; }
.bArea .txt { position: absolute; left:0; top:50%; width:100%; transform: translateY(-50%); text-align: center; color:#fff; line-height:1.1; z-index:2;}
.bArea .txt .p1 { font-size: 40px; }
.bArea .txt .p2 { font-size: 50px; margin-top: 20px; }
.bArea .txt .p3 { margin-top: 100px; }
.bArea .txt .p3 .mBtn { /*background: url(ico04.svg) no-repeat center; background-size: 100% 100%;*/
	background: linear-gradient(140deg, #0056e7 0%, rgba(17, 26, 41, 0.7) 38%, rgba(16, 27, 38, 0.7) 51%, rgba(20, 52, 34, 0.7) 67%, #16d064 100%, #16d064 100%);
	box-shadow: 0px 9px 69px 0px rgba(46, 197, 69, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.3);
 }
.bArea .txt .p3 i { position: relative; z-index: 9;}

.bArea:hover .pic .img03 { transform: scale(1.1)!important; }

@media all and (max-width:1680px){
	.bArea .txt .p1 { font-size: 28px; }
	.bArea .txt .p2 { font-size: 38px; margin-top: 15px; }
	.bArea .txt .p3 { margin-top: 60px; }
}
@media all and (max-width:1200px){
	.bArea .txt .p1 { font-size: 18px; }
	.bArea .txt .p2 { font-size: 28px; margin-top: 15px; }
	.bArea .txt .p3 { margin-top: 40px; }
}
@media all and (max-width:900px){
	.bArea .txt .p1 { font-size: 16px; }
	.bArea .txt .p2 { font-size: 20px; margin-top: 15px; }
	.bArea .txt .p3 { margin-top: 30px; }
}
@media all and (max-width:750px){
	.bArea .pic .img01 { display: none; }
	.bArea .pic .img02 { display: block; }
	.bArea .pic .img03 { display: none; }
}



.border-effect {
	--spread: 60;
	border-radius: 25px;
	display: flex;
	flex-direction: column;
}
.border-effect::before {
	border: 1px solid transparent;
	background-attachment: fixed;
	-webkit-mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), hsla(0, 0%, 100%, 0.15) 0deg, #fff, hsla(0, 0%, 100%, 0.15) calc(var(--spread) * 2.5deg));
	mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg), hsla(0, 0%, 100%, 0.15) 0deg, #fff, hsla(0, 0%, 100%, 0.15) calc(var(--spread) * 2.5deg));
	-webkit-mask-clip: padding-box, border-box;
	mask-clip: padding-box, border-box;
	-webkit-mask-composite: source-in, xor;
	mask-composite: intersect;
	opacity: 1;
 }
.border-effect::after,.border-effect::before {
	position: absolute;
	inset: 0;
	content: '';
	pointer-events: none;
	border-radius:25px;
	transition: opacity 1s;
	z-index: 1;
}
.border-effect::after {
	background: #fff;
	background-attachment: fixed;
	border: 1px solid transparent;
	-webkit-mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
	mask: linear-gradient(#0000, #0000), conic-gradient(from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg), #0000 0deg, #fff, #0000 calc(var(--spread) * 0.5deg));
	-webkit-mask-clip: padding-box, border-box;
	mask-clip: padding-box, border-box;
	-webkit-mask-composite: source-in, xor;
	mask-composite: intersect;
  }



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



@keyframes mouse{
    0%{top:3px;height:2px;margin-top:-1px}
    50%{top:20px;margin-top:-5px;height:10px}
    100%{top:35px;margin-top:-1px;height:2px}
}