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

.aArea { padding:80px 0 550px; text-align:center; }
.aArea .p1 { font-size:30px; font-weight:bold; color:#333; line-height:1; }
.aArea .p2 { font-size:16px; color:#666; line-height:30px; padding:0 11%; margin-top:40px; }
.aArea .p3 { margin-top:65px; }
.aArea .p3 a { display:inline-block; width:145px; height:45px; line-height:45px; box-sizing: border-box; margin:0 5px; border-radius:25px; border:1px solid #b7b7b7; color:#333; cursor:pointer; }
.aArea .p3 a i { display:inline-block; font-size:16px; padding-right:50px; }
.aArea .p3 a.a1 i { background:url(a11.png) no-repeat center right; }
.aArea .p3 a.a2 i { background:url(a21.png) no-repeat center right; }

.aArea .p3 a:hover { background:#365bab; color:#fff; border-color:#365bab; }
.aArea .p3 a.a1:hover i { background:url(a12.png) no-repeat center right; }
.aArea .p3 a.a2:hover i { background:url(a22.png) no-repeat center right; }

 

@media all and (max-width:1480px){
	.aArea { padding:80px 0 480px; }
}
@media all and (max-width:1280px){
	.aArea { padding:60px 0 30%; background-size:contain!important; } 
}
@media all and (max-width:900px){
	.aArea { padding:30px 0 30%; } 
	.aArea .p1 { font-size:24px; }
	.aArea .p2 { font-size:14px; line-height:25px; padding:0; margin-top:25px; }
	.aArea .p3 { margin-top:35px; }
	.aArea .p3 a { width:120px; height:35px; line-height:35px; }
	.aArea .p3 a i { font-size:12px; padding-right:35px; background-size:20px 20px!important; }	
}


.bArea01 { padding:80px 0 45px; text-align:center; }
.bArea01 .p1 { font-size:30px; font-weight:bold; color:#333; line-height:1; }
.bArea01 .p2 { font-size:16px; color:#666; margin-top:25px; }

.bArea02 { position:relative; width:1920px; left:50%; margin-left:-960px; }
.bArea02 .gallery-top01 .swiper-slide .txt { position:absolute; top:140px; left:50%; margin-left:-720px; width:655px; color:#fff; z-index:2; }
.bArea02 .gallery-top01 .swiper-slide .txt .p1 { font-size:28px; font-weight:bold; }
.bArea02 .gallery-top01 .swiper-slide .txt .p2 { font-size:16px; line-height:30px; margin-top:40px; }
.bArea02 .gallery-top01 .swiper-slide .txt .p3 { margin-top:60px; text-align:center; width:145px; background:#fff; border-radius:25px; }
.bArea02 .gallery-top01 .swiper-slide .txt .p3 a { position:relative; display:block; width:145px; height:45px; line-height:45px; color:#365bab; cursor:pointer; z-index:1; border-radius:25px; overflow:hidden; }
.bArea02 .gallery-top01 .swiper-slide .txt .p3 a:before { position:absolute; display:block; content:""; width:0; bottom:0; background:#365bab; top:0; left:200px; transition: all 0.6s;  border-radius:25px; z-index:-1; }
.bArea02 .gallery-top01 .swiper-slide .txt .p3 a i { display:inline-block; font-size:16px; padding-right:50px; background:url(a02.png) no-repeat center right; }

.bArea02 .gallery-top01 .swiper-slide .txt .p3:hover a:before { width:100%; left:0; }
.bArea02 .gallery-top01 .swiper-slide .txt .p3:hover a { color:#fff; }
.bArea02 .gallery-top01 .swiper-slide .txt .p3:hover a i { padding-right:0; background:none; }
 

.bBox02 { position:absolute; left:0; right:0; bottom:0; border-top:1px solid rgba(255,255,255,0.3); z-index:2; }
.bBox02 .wrap { border-left:1px solid rgba(255,255,255,0.3); }
.bBox02 .gallery-thumbs01 .swiper-slide a { position:relative; display:block; padding:40px 20px 0 20px; min-height:125px; border-right:1px solid rgba(255,255,255,0.3); cursor:pointer; overflow:hidden; z-index:2; }
.bBox02 .gallery-thumbs01 .swiper-slide a:before { position:absolute; top:300px; left:0; right:0; bottom:0; content:""; display:block;background:#3661b0;transition: all 0.6s; z-index:-1; }
.bBox02 .gallery-thumbs01 .swiper-slide .p1 { font-size:20px; color:#fff; }
.bBox02 .gallery-thumbs01 .swiper-slide .p2 { width:30px; height:3px; background:#fff; margin-top:15px; }
.bBox02 .gallery-thumbs01 .swiper-slide-thumb-active a { background:#3661b0; }


@media all and (min-width:1000px){
	 
	.bBox02 .gallery-thumbs01 .swiper-slide { float:left; width:14.28%; }
	.bBox02 .gallery-thumbs01 .swiper-slide.on {  }
	
	.bBox02 .gallery-thumbs01 .swiper-slide.on  a:before { top:0; }
}


@media all and (max-width:1480px){
	 .bArea02 { position:relative; width:100%; left:0; margin-left:0; }
	 .bArea02 .gallery-top01 .swiper-slide .txt { top:10%; left:50%; margin-left:-600px; width:80%;  }
	 .bArea02 .gallery-top01 .swiper-slide .txt .p1 { font-size:24px; }
	.bArea02 .gallery-top01 .swiper-slide .txt .p2 { font-size:14px; line-height:25px; margin-top:30px; }
	.bArea02 .gallery-top01 .swiper-slide .txt .p3 { margin-top:40px; }

	 .bBox02 .gallery-thumbs01 .swiper-slide a { padding:20px 10px 0 10px; min-height:100px; }
	 .bBox02 .gallery-thumbs01 .swiper-slide .p1 { font-size:16px; }
}
@media all and (max-width:1280px){
	.bArea01 { padding:60px 0 35px; }
	.bArea02 .gallery-top01 .swiper-slide .txt { top:10%; left:4%; margin-left:0; width:92%;  }
	.bArea02 .gallery-top01 .swiper-slide .txt .p1 { font-size:20px; }
	.bArea02 .gallery-top01 .swiper-slide .txt .p2 { font-size:14px; line-height:25px; margin-top:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box;  -webkit-box-orient:vertical; -webkit-line-clamp:3; }
	.bArea02 .gallery-top01 .swiper-slide .txt .p3 { margin-top:20px; }
	
	.bBox02 .gallery-thumbs01 .swiper-slide a { padding:20px 10px 0 10px; min-height:80px; }
	.bBox02 .gallery-thumbs01 .swiper-slide .p1 { font-size:14px; }
}
@media all and (min-width:900px){
	.bArea02 .gallery-top01 .swiper-slide .txt { background:none!important; }
}
@media all and (max-width:900px){
	.bArea01 { padding:30px 0 25px; }
	.bArea01 .p1 { font-size:24px; }
	.bArea01 .p2 { font-size:14px; }

	.bArea02 .gallery-top01 .swiper-slide .pic { display:none; }
	.bArea02 .gallery-top01 .swiper-slide .txt { position:relative; top:0; left:0; width:92%; padding:30px 4% 140px 4%; background-size:cover!important; }

	.bArea02 .gallery-top01 .swiper-slide .txt .p3 { width:120px; }
	.bArea02 .gallery-top01 .swiper-slide .txt .p3 a { width:120px; height:35px; line-height:35px; }
	.bArea02 .gallery-top01 .swiper-slide .txt .p3 a i { font-size:12px; padding-right:35px; background-size:20px 20px!important; }		
}


.cArea { padding:70px 0; background:url(cArea.png) no-repeat center bottom; }
.cArea .wrap { position:relative; }
.cArea01 { position:absolute; left:0; top:0; font-size:30px; font-weight:bold; color:#333; line-height:45px; z-index:2; }
.cArea02 .hd { position:relative; padding-left:180px; }
.cArea02 .hd ul li { float:left; margin-right:40px; cursor:pointer; }
.cArea02 .hd ul li p { display:inline-block; padding:0 25px; border:1px solid #d1d2d2; border-radius:25px; line-height:43px; font-size:20px; color:#333; }

.cArea02 .hd ul li a { position:absolute; top:0; right:0; display:block; text-align:center; width:145px; height:45px; line-height:45px; background:#fff; color:#365bab; border-radius:25px; cursor:pointer; z-index:2; overflow:hidden; display:none; }
.cArea02 .hd ul li a:before { position:absolute; display:block; content:""; width:0; bottom:0; background:#365bab; top:0; left:200px; transition: all 0.6s;  border-radius:25px; z-index:-1; }
.cArea02 .hd ul li a i { display:inline-block; font-size:16px; padding-right:50px; background:url(a02.png) no-repeat center right; }
 
.cArea02 .hd ul li a:hover { background:none; }
.cArea02 .hd ul li a:hover:before { width:100%; left:0; }
.cArea02 .hd ul li a:hover { color:#fff; }
.cArea02 .hd ul li a:hover i { padding-right:0; background:none; }
 
.cArea02 .hd ul li.on p { border-color:#365bab; background:#365bab; color:#fff; }
.cArea02 .hd ul li.on a { display:block; }

.cArea02 .bd { margin-top:50px; }
 .cBox-swiper .swiper-slide { background:#fff; }
.cBox-swiper .swiper-slide .pic { overflow: hidden; }
.cBox-swiper .swiper-slide .pic img{ transition: all 0.4s;}

.cBox-swiper .swiper-slide .txt { position:relative; padding:30px 25px; z-index:1; overflow:hidden; }
.cBox-swiper .swiper-slide .txt:before { position:absolute; left:0; right:0; top:300px; bottom:0; background:#365bab; display:block; content:""; transition: all 0.3s; z-index:-1; }
.cBox-swiper .swiper-slide .txt .p1 { font-size:20px; font-weight: bold; color: #333; line-height:25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cBox-swiper .swiper-slide .txt .p2 { height:50px; margin-top:10px; font-size: 14px; color: #666; line-height:25px; text-align: justify; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.cBox-swiper .swiper-slide .txt .p3 { font-size: 14px; color: #999; margin-top:15px; }

.cBox-swiper .swiper-slide:hover .pic img {transform: scale(1.1); }
.cBox-swiper .swiper-slide:hover .txt:before { top:0; }
.cBox-swiper .swiper-slide:hover .txt .p1 { color:#fff; }
.cBox-swiper .swiper-slide:hover .txt .p2 { color:#fff; }
.cBox-swiper .swiper-slide:hover .txt .p3 { color:#fff; }

 
.cBox { position: relative; margin-top:35px; }
.cBox .cBox-prev,.cBox .cBox-next { position:absolute; top: 0; width: 45px; height: 45px; background: url(pic_21.png) no-repeat center center; background-size: cover!important;  cursor:pointer; }
.cBox .cBox-prev { right: 80px; transform: rotate(180deg); }
.cBox .cBox-next { right: 0; }
.cBox .cBox-prev:hover,.cBox .cBox-next:hover{ background-image: url(pic_22.png); }
 
.cBox .swiper-num .act { font-size: 36px; font-weight: bold; color: #365bab; }
.cBox .swiper-num .tot { font-size: 14px; color: #999; }

.cBox .cBox-page {width: 100%; height: 5px; margin-top: 10px; border-radius: 5px; background: #d1d1d1; }
.cBox .cBox-page .swiper-pagination-progressbar-fill {height: 7px; border-radius: 5px; background: #365bab; margin-top: -1px; }

 

@media all and (max-width:1280px){
	.cBox-swiper .swiper-slide .txt { padding:25px 15px; }
	.cBox-swiper .swiper-slide .txt .p1 { font-size:18px; line-height:20px; }
	.cBox-swiper .swiper-slide .txt .p2 { height:50px; margin-top:10px; font-size: 14px; line-height:25px; }
	.cBox-swiper .swiper-slide .txt .p3 { font-size: 14px; margin-top:10px; }
}
 
@media all and (max-width:900px){
	.cArea { padding:30px 0; }
	.cArea01 { position:relative; font-size:24px; text-align:center; margin-bottom:30px; }

	.cArea02 .hd { padding-left:0; }
	.cArea02 .hd ul li { margin-right:20px; }
	.cArea02 .hd ul li p { padding:0 20px; line-height:35px; font-size:14px; }
 
	.cArea02 .hd ul li a { width:120px; height:35px; line-height:35px; }
	.cArea02 .hd ul li a i { font-size:12px; padding-right:35px; background-size:20px 20px!important; }	

	.cArea02 .bd { margin-top:30px; }

	.cBox-swiper .swiper-slide .txt { padding:20px 10px; }
	.cBox-swiper .swiper-slide .txt .p1 { font-size:16px; line-height:20px; }
	.cBox-swiper .swiper-slide .txt .p2 { height:40px; margin-top:10px; font-size: 12px; line-height:20px; }
	.cBox-swiper .swiper-slide .txt .p3 { font-size:12px; margin-top:10px; }
	
	.cBox-swiper .txt { padding: 20px; }
    .cBox .swiper-num .act {font-size: 24px; }
    .cBox .cBox-prev,.cBox .cBox-next { width: 32px; height: 32px; }
	.cBox .cBox-prev { right:50px; }
}