@charset "utf-8";
.container { position: relative; width: 100%; }

.aArea { padding:80px 0 100px; }
.aArea .hd01 { text-align:center; font-size:36px; color:#323232; font-weight:bold; line-height:1; }
.aArea01 { margin-top:30px; }
.aArea01 .hd { text-align:center; }
.aArea01 .hd ul li { display:inline-block; font-size:18px; color:#323232; font-weight:bold; padding-bottom:10px; border-bottom:2px solid #fff; margin:0 40px; cursor:pointer; }
.aArea01 .hd ul li.on { color:#024fff; border-color:#024fff; }
.aArea01 .bd { margin-top:40px; }
.aArea01 .bd ul li { position:relative; float:left; width:23.5%; border:1px solid #efefef; margin:0 2% 2.5% 0; text-align:center; box-sizing: border-box; overflow:hidden; }
.aArea01 .bd ul li:nth-child(4n) { margin-right:0; }
.aArea01 .bd ul li .txt { font-size:16px; color:#5f5f5f; font-weight:bold; line-height:60px; height:60px; padding:0 2%; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.aArea01 .bd ul li .txt01 { position:absolute; left:0; top:500px; right:0; bottom:0; background:#024fff; opacity: 0; transition: all 0.6s; z-index:9; }
.aArea01 .bd ul li .txt01 .txt011 { position:absolute; left:9%; right:9%; top:50%; transform: translateY(-50%); z-index:5; }
.aArea01 .bd ul li .txt01 .p1 { text-align:center; height:20px; line-height:20px; color:#fff; font-size:18px; font-weight:bold; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.aArea01 .bd ul li .txt01 .p2 { width:50px; height:1px; background:rgba(255,255,255,0.6); margin:20px auto 0; }
.aArea01 .bd ul li .txt01 .p3 { font-size:14px; line-height:24px; margin-top:30px; color:rgba(255,255,255,0.6); overflow:hidden; text-overflow:ellipsis; display:-webkit-box;  -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.aArea01 .bd ul li .txt01 .p4 { margin-top:30px; text-align:center; }
.aArea01 .bd ul li .txt01 .p4 i { display:inline-block; width:95px; height:25px; border:1px solid #fff; border-radius:20px; font-size:12px; color:#fff; line-height:25px; }
 
.aArea01 .bd ul li:hover .txt01 { top:0; opacity:1; }
 
@media all and (max-width:1400px){
	.aArea { padding:60px 0 80px; }
	.aArea .hd01 { font-size:28px; }
	.aArea01 { margin-top:30px; }
	.aArea01 .hd ul li { font-size:16px; margin:0 30px; }
	.aArea01 .bd { margin-top:30px; }

	.aArea01 .bd ul li .txt01 .p2 { margin:15px auto 0; }
	.aArea01 .bd ul li .txt01 .p3 { margin-top:15px; }
	.aArea01 .bd ul li .txt01 .p4 { margin-top:15px; }
}
@media all and (max-width:1200px){
	.aArea01 .bd ul li .txt01 { display:none!important; opacity:0!important; }
	
	.aArea01 .bd ul li .txt { font-size:14px; line-height:50px; height:50px; font-weight:normal; }
}
@media all and (max-width:900px){
	.aArea { padding:30px 0; }
	.aArea .hd01 { font-size:24px; }
	.aArea01 { margin-top:30px; }
	.aArea01 .hd ul li { font-size:14px; margin:0 10px; }
	.aArea01 .bd { margin-top:30px; }

	.aArea01 .bd ul li .txt01 .p2 { margin:15px auto 0; }
	.aArea01 .bd ul li .txt01 .p3 { margin-top:15px; }
	.aArea01 .bd ul li .txt01 .p4 { margin-top:15px; }
	
	.aArea01 .bd ul li { width:49%; }
	.aArea01 .bd ul li:nth-child(2n) { margin-right:0; }
}

.bArea { padding:70px 0 190px; background:url(bArea.png) no-repeat right bottom #f0f0f0; }
.bArea01 { position:relative; }
.bArea01 .txt01 { float:left; width:160px; border-right:2px solid #222; color:#222; min-height:110px; line-height:1; }
.bArea01 .txt01 .p1 { font-size:72px; font-weight:bold; }
.bArea01 .txt01 .p2 { font-size:22px; font-weight:bold; color:#0050fe; margin-top:10px; }

.bArea01 .txt02 { float:left; width:545px; margin-left:70px; color:#919191; }
.bArea01 .txt02 .p1 { font-size:16px; text-transform:uppercase; }
.bArea01 .txt02 .p1 i { font-size:30px; color:#333; font-weight:bold; margin-right:10px; }
.bArea01 .txt02 .p2 { font-size:14px; line-height:1.7; margin-top:20px; }
.bArea01 .txt02 .p3 { position:absolute; top:40px; right:10%; z-index:5; }
.bArea01 .txt02 .p3 a { font-size:14px; color:#919191; }
.bArea01 .txt02 .p3 a:hover { color:#0050fe; }
.bArea01 .txt03 { display:none; font-size:14px; line-height:1.5; margin-top:20px; }

.bArea02 { margin-top:140px; }
.bArea02 .txt { line-height:1; }
.bArea02 .txt .p1 { font-size:28px; color:#7c7c7c; text-transform:uppercase; }
.bArea02 .txt .p2 { font-size:52px; color:#222; font-weight:bold; margin-top:20px; }
.bArea02 .txt .p3 { margin-top:45px; background:#e3e3e3; height:1px; max-width:670px; }
.bArea02 .txt .p4 { margin-top:45px; color:#222; line-height:2; font-size:14px; max-width:950px; }

.bArea02 .txt01 { margin-top:80px; }
.bArea02 .txt01 ul li { float:left; padding:10px 0 10px 75px; margin-right:120px; line-height:1; }
.bArea02 .txt01 ul li:last-child { margin-right:0; }
.bArea02 .txt01 ul li .p1 { font-size:24px; color:#0050fe; font-weight:bold; }
.bArea02 .txt01 ul li .p2 { font-size:14px; color:#323232; margin-top:10px; }

@media all and (max-width:1200px){
	.bArea { padding:50px 0 100px; }
	.bArea01 .txt01 { float:left; width:100px; min-height:90px; line-height:1; }
	.bArea01 .txt01 .p1 { font-size:50px; }
	.bArea01 .txt01 .p2 { font-size:18px; }

	.bArea01 .txt02 { float:right; width:calc(100% - 145px); margin-left:0; color:#919191; }
	.bArea01 .txt02 .p1 { font-size:14px; }
	.bArea01 .txt02 .p1 i { font-size:24px; }
	.bArea01 .txt02 .p2 { font-size:14px; line-height:1.5; margin-top:15px; padding-right:100px; }
	.bArea01 .txt02 .p3 { top:30px; right:0; }

	.bArea02 { margin-top:80px; }
	.bArea02 .txt .p1 { font-size:20px; }
	.bArea02 .txt .p2 { font-size:32px; margin-top:20px; }
	.bArea02 .txt .p3 { margin-top:30px; max-width:670px; }
	.bArea02 .txt .p4 { margin-top:30px; line-height:2; font-size:14px; max-width:950px; }

	.bArea02 .txt01 { margin-top:50px; }
} 
@media all and (max-width:750px){
	.bArea { padding:30px 0; background:#f0f0f0; }
	
	
	.bArea01 .txt01 { float:left; width:65px; min-height:60px; line-height:1; }
	.bArea01 .txt01 .p1 { font-size:34px; }
	.bArea01 .txt01 .p2 { font-size:14px; }

	.bArea01 .txt02 { float:right; width:calc(100% - 100px); }
	.bArea01 .txt02 .p1 { font-size:12px; }
	.bArea01 .txt02 .p1 i { display:block; font-size:18px; }
	.bArea01 .txt02 .p2 { display:none; }
	.bArea01 .txt02 .p3 { position:relative; top:0; right:0; margin-top:0; }
	.bArea01 .txt03 { display:block; }
	
	.bArea02 { margin-top:40px; }
	.bArea02 .txt .p1 { font-size:14px; line-height:1.3; }
	.bArea02 .txt .p2 { font-size:22px; margin-top:15px; }
	.bArea02 .txt .p3 { margin-top:20px; max-width:670px; }
	.bArea02 .txt .p4 { margin-top:20px; line-height:2; font-size:14px; max-width:950px; }

	.bArea02 .txt01 { margin-top:30px; }
	.bArea02 .txt01 ul li { float:left; padding:0 0 0 40px; margin-right:30px; line-height:1; background-size:30px 30px!important; }
	.bArea02 .txt01 ul li:last-child { margin-right:0; }
	.bArea02 .txt01 ul li .p1 { font-size:18px; }
	.bArea02 .txt01 ul li .p2 { font-size:12px; margin-top:5px; }

} 

.cArea { padding:85px 0; }
.cArea .hd01 { text-align:center; line-height:1; }
.cArea .hd01 .p1 { font-size:36px; color:#323232; font-weight:bold; }
.cArea .hd01 .p2 { font-size:14px; color:#acacac; font-weight:bold; margin-top:15px; text-transform:uppercase; }
.cArea01 { margin-top:50px; }
.cArea01 .swiper-slide .pic { overflow:hidden; }
.cArea01 .swiper-slide .pic img { transition: all 0.6s; }
.cArea01 .swiper-slide .txt { margin-top:20px; }
.cArea01 .swiper-slide .txt .p1 { font-size:16px; color:#434343; height:20px; line-height:20px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.cArea01 .swiper-slide .txt .p2 { font-size:14px; color:#999; height:46px; line-height:23px; margin-top:15px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box;  -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.cArea01 .swiper-slide .txt .p3 { height:1px; margin-top:25px; background:#efefef; }
.cArea01 .swiper-slide .txt .p4 { margin-top:25px; font-size:18px; color:#949494; font-weight:bold; }


.cArea01 .swiper-slide:hover .txt .p1 { font-weight:bold; color:#0050fe; }
.cArea01 .swiper-slide:hover .txt .p4 { background:url(c01.png) no-repeat center right; }
.cArea01 .swiper-slide:hover .pic img { transform: scale(1.1)!important; }

@media all and (max-width:1400px){
	.cArea { padding:60px 0; }
	.cArea .hd01 .p1 { font-size:28px; }
	 
}
@media all and (max-width:1200px){
	
}
@media all and (max-width:900px){
	.cArea { padding:30px 0; }
	.cArea .hd01 .p1 { font-size:24px; }
	
	.cArea01 { margin-top:30px; }
	.cArea01 .swiper-slide .txt { margin-top:20px; }
	.cArea01 .swiper-slide .txt .p1 { font-size:14px;  }
	.cArea01 .swiper-slide .txt .p2 { font-size:12px; height:40px; line-height:20px; margin-top:10px; }
	.cArea01 .swiper-slide .txt .p3 { margin-top:15px; }
	.cArea01 .swiper-slide .txt .p4 { margin-top:15px; font-size:14px; }

}