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

html, body {height: 100%;}
html, body .wrapper { width:100%; height: 100%;}
 
.swiper-container-body { width: 100%;  height: 100%; }
.swiper-wrapper-body { /*transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;*/ }
.section { position:relative; background-size:cover!important; }

.swiper-pagination-body { position:absolute; right:20px!important; z-index:99; }
.swiper-pagination-body .swiper-pagination-bullet { width:9px; height:9px; margin:10px 0!important; border:2px solid #a0a0a0; border-radius:100%; background:#a0a0a0; opacity:1; }
.swiper-pagination-body .swiper-pagination-bullet-active { background:none; }
 
 
.banner { position:relative; width:100%; height:100%; overflow:hidden; }
.banner .swiper_banner { width:100%; height:100%; overflow:hidden; }
.banner .swiper_banner .swiper-slide { position:relative; width:100%; height:100%; overflow:hidden; }
.banner .swiper_banner .swiper-slide a { display:block; width:100%; height:100%;}
.banner .swiper_banner .swiper-slide a.a1 { display:block; }
 
.banner .swiper_banner .pagination01 { width:auto; font-size:0; text-align:center; position:absolute; left:50%; margin-left:-600px; right:auto; bottom:70px; z-index:9} 
.banner .swiper_banner .pagination01 span{ display:inline-block; vertical-align:top; width:25px; height:6px; border-radius:6px; box-sizing:border-box; background:#fff; opacity:1; margin:0 5px; }
.banner .swiper_banner .pagination01 span.swiper-pagination-bullet-active{ width:50px; background:#24ac38;  }
 
.ban01 { position:absolute; bottom:40px; left:50%; transform: translateX(-50%); text-align:center; z-index:5; }
.ban01 .p1 img { animation: rotate 1.5s infinite; transform:translateY(0) }
.ban01 .p2 { font-size:16px; color:#fff; margin-top:10px; }
 
@keyframes rotate{
	from{ transform: translateY(-50%) }
    to{ transform: translateY(0) }
}
 
.section03 { background:url(section03.jpg) no-repeat center; }
.section04 { background:url(section04.jpg) no-repeat center; }
.section05 { background:#fff; }

.aArea { position:absolute; left:0; top:0; right:0; bottom:0; z-index:1; }


.aArea01 { position:absolute; top:27vh; left:0; right:0; z-index:9; }
.aArea01:before { position:relative; top:120px; left:0; right:0; height:1px; display:block; content:""; background:rgba(255,255,255,0.2); z-index:0; }
.aArea01 .swiper-slide { text-align:center; cursor:pointer; }
.aArea01 .swiper-slide .p1 { height:110px; }
.aArea01 .swiper-slide .p1 .img02 { display:none; }
.aArea01 .swiper-slide .p2 { width:19px; height:19px; padding:5px; background:rgba(255,255,255,0.3); border-radius:100%; margin:0 auto; box-sizing: border-box; }
.aArea01 .swiper-slide .p2 i { display:block; width:9px; height:9px; background:#fff; border-radius:100%; margin:0 auto; }
.aArea01 .swiper-slide .p3 { font-size:18px; color:#fff; margin-top:35px; }

.aArea02 { position:absolute; bottom:0; left:0; right:0; top:0; z-index:2; }
.aArea02 .swiper-slide { width:100%; height:100vh; }
.aArea02 .swiper-slide .pic { width:100%; height:100vh; background-size:cover!important; }
.aArea02 .swiper-slide .txt { position:absolute; bottom:23vh; left:50%; width:1200px; margin-left:-600px; z-index:2; }
.aArea02 .swiper-slide .txt .p1 { font-size:14px; line-height:2; color:#fff; }
.aArea02 .swiper-slide .txt .p2 { margin-top:55px; }
.aArea02 .swiper-slide .txt .p2 a { display:block; width:220px; height:48px; line-height:48px; padding-left:50px; font-size:16px; color:#fff; background:url(a01.png) no-repeat center left; box-sizing: border-box; }

.aArea01 .swiper-slide-thumb-active .p1 .img01 { display:none; }
.aArea01 .swiper-slide-thumb-active .p1 .img02 { display:inline-block; }
.aArea01 .swiper-slide-thumb-active .p2 { background:rgba(0,145,215,0.3); }
.aArea01 .swiper-slide-thumb-active .p2 i { background:#0091d7; }
.aArea01 .swiper-slide-thumb-active .p3 { color:#0091d7; }

@media all and (max-height:800px){
	.aArea01 { top:23vh; }
	
	.aArea02 .swiper-slide .txt { bottom:16vh; }
}
@media all and (max-height:600px){
	.aArea01 { top:23vh; }
	
	.aArea02 .swiper-slide .txt { bottom:10vh; }
}


.Area-hd { position:relative; color:#333; line-height:1.1; }
.Area-hd .p1 { font-size:20px; display:none; }
.Area-hd .p2 { font-size:46px; margin-top:0; }
.Area-hd .p3 { position:absolute; right:0; bottom:0; z-index:2; }
.Area-hd .p3 a { position:relative; display:inline-block; padding-bottom:9px; font-size:14px; color:#000; z-index:5; }
.Area-hd .p3 a:before { position:absolute; left:50%; margin-left:-45px; bottom:5px; display:block; width:90px; height:8px; content:""; background:#7acff6; z-index:-1; }

.bArea { position:absolute; top:50%; left:0; right:0; margin-top:50px; transform: translateY(-50%); z-index:2; }
.bArea01 { float:left; width:435px; padding-top:40px; line-height:1.1; }
.bArea01 .p1 { font-size:20px; color:#7a7a7a; display:none; }
.bArea01 .p2 { font-size:50px; color:#171717; margin-top:0; }
.bArea01 .p3 { font-size:14px; color:#666; margin-top:30px; line-height:2; text-align:justify; }
.bArea01 .p4 { width:300px; margin-top:40px; }
.bArea01 .p4 a { float:left; display:block; width:120px; height:40px; margin-right:20px; text-align:center; line-height:40px; border-radius:7px; font-size:14px; }
.bArea01 .p4 a:nth-child(n + 3) { margin-top:20px; }

.bArea01 .p4 a:nth-child(1) { color:#23ac38; border:1px solid #23ac38; }
.bArea01 .p4 a:nth-child(1):hover { color:#fff; background:#23ac38; }
.bArea01 .p4 a:nth-child(2) { color:#1f84d3; border:1px solid #1f84d3; }
.bArea01 .p4 a:nth-child(2):hover { color:#fff; background:#1f84d3; }
.bArea01 .p4 a:nth-child(3) { color:#ff9314; border:1px solid #ff9314; }
.bArea01 .p4 a:nth-child(3):hover { color:#fff; background:#ff9314; }
.bArea01 .p4 a:nth-child(4) { color:#13ab82; border:1px solid #13ab82; }
.bArea01 .p4 a:nth-child(4):hover { color:#fff; background:#13ab82; }

.bArea01 .p5 { margin-top:50px; }
.bArea01 .p5 a { display:block; width:220px; height:48px; line-height:48px; font-size:16px; color:#000; /* padding-left:50px;color:#fff; background:url(b01.png) no-repeat center left; box-sizing: border-box;*/ }
.bArea01 .p5 a:hover { color:#0091d7; }

.bArea02 { float:right; width:calc(100% - 435px); }
.bArea02 .txt ul { float:right; }
.bArea02 .txt ul li { float:left; text-align:center; }
.bArea02 .txt ul li .p1 { width:90px; height:90px; line-height:90px; font-weight:bold; border-radius:100%; animation-play-state: running; transform: scale(1); visibility: visible; transition: all 1s; }
.bArea02 .txt ul li .p1 i { font-size:42px; }
.bArea02 .txt ul li .p1 em { position:relative; top:-25px; left:0; font-size:18px; font-family:"Arial"; }
.bArea02 .txt ul li .p2 { font-size:14px; color:#2d2d2d; margin-top:15px; }
.bArea02 .txt ul li .p3 { width:1px; height:80px; margin:10px auto 0; background:#d5d5d5; }

.bArea02 .txt ul li:nth-child(1) { padding-top:60px; }
.bArea02 .txt ul li:nth-child(1) .p1 { background:rgba(210,231,253,0.7); color:#1f84d3; }
.bArea02 .txt ul li:nth-child(1) .p3 { height:80px; }
.bArea02 .txt ul li:nth-child(1):hover .p1 { box-shadow: 0 0 0 20px rgba(210,231,253,0.4); }

.bArea02 .txt ul li:nth-child(2) { padding-top:155px; margin-left:50px; }
.bArea02 .txt ul li:nth-child(2) .p1 { background:rgba(218,236,221,0.7); color:#23ac38; }
.bArea02 .txt ul li:nth-child(2) .p3 { height:30px; }
.bArea02 .txt ul li:nth-child(2):hover .p1 { box-shadow: 0 0 0 20px rgba(218,236,221,0.4); }
 
.bArea02 .txt ul li:nth-child(3) .p1 { background:rgba(210,240,253,0.7); color:#00a0e9; width:130px; height:130px; line-height:130px; }
.bArea02 .txt ul li:nth-child(3) .p1 i { font-size:65px; }
.bArea02 .txt ul li:nth-child(3) .p1 em { top:-35px; }
.bArea02 .txt ul li:nth-child(3) .p3 { height:100px; }
.bArea02 .txt ul li:nth-child(3):hover .p1 { box-shadow: 0 0 0 20px rgba(210,240,253,0.4); }

.bArea02 .txt ul li:nth-child(4) { padding-top:135px; margin-left:30px; }
.bArea02 .txt ul li:nth-child(4) .p1 { background:rgba(244,231,206,0.7); color:#ff9314; width:115px; height:115px; line-height:115px; }
.bArea02 .txt ul li:nth-child(4) .p3 { height:30px; }
.bArea02 .txt ul li:nth-child(4):hover .p1 { box-shadow: 0 0 0 20px rgba(244,231,206,0.4); }

.bArea02 .txt ul li:nth-child(5) { padding-top:20px; margin-left:30px; }
.bArea02 .txt ul li:nth-child(5) .p1 { background:rgba(115,200,177,0.3); color:#13ab82; }
.bArea02 .txt ul li:nth-child(5) .p3 { height:100px; }
.bArea02 .txt ul li:nth-child(5):hover .p1 { box-shadow: 0 0 0 20px rgba(115,200,177,0.1); }

.bArea02 .pic { margin-top:30px; }
.bArea02 .pic img { max-width:100%; height:auto; }

.cArea { position:absolute; top:50%; left:0; right:0; margin-top:50px; transform: translateY(-50%); z-index:2; }

.cArea .Area-hd .p1 { display:none; }
.cArea .Area-hd .p2 { margin-top:0; }

.cArea .bd { margin-top:40px; }
.cArea .bd .bd01 { position:relative; float:left; /*width:615px;*/ width:547px; }
.cArea .bd .bd01 .pic { overflow:hidden; }
.cArea .bd .bd01 .pic img { transition: all 0.6s; width:547px; height:357px; }
.cArea .bd .bd01 .txt { position:absolute; left:0; right:0; bottom:-1px; z-index:5; background:rgba(0,0,0,0.5); padding:0 100px 0 30px; height:80px; line-height:80px; font-size:18px; color:#fff; font-weight:bold; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }

.cArea .bd .bd01:hover .txt {/*background:rgba(0,145,215,0.8); color:#fff;*/ }
.cArea .bd .bd01:hover .pic img { transform: scale(1.1)!important; }

.cArea .bd .bd01 .swiper-pagination-c01 { position:absolute; bottom:28px; right:10px; z-index:2; }
.cArea .bd .bd01 .swiper-pagination-bullet { width:10px; height:10px; background:#fff; opacity:1; margin:0 3px; }
.cArea .bd .bd01 .swiper-pagination-bullet-active { background:#0091d7; }


.cArea .bd .bd02 { float:right; width:615px; padding-top:10px; }
.cArea .bd .bd02 ul li { font-size:14px; color:#3b3b3b; height:20px; line-height:20px; padding-left:30px; background:url(c01.jpg) no-repeat center left;  }
.cArea .bd .bd02 ul li a { float:left; width:470px; color:#3b3b3b; height:20px; line-height:20px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.cArea .bd .bd02 ul li span { float:right; color:#777; }
.cArea .bd .bd02 ul li:hover { background:url(c02.jpg) no-repeat center left; color:#0091d7; }
.cArea .bd .bd02 ul li:hover a { color:#0091d7; }
.cArea .bd .bd02 ul li:nth-child(n + 2) { margin-top:12px; }

.cArea .bd .bd02 .p3 { margin-top:20px; }
/*
.cArea .bd .bd02 .p3 a { position:relative; display:inline-block; padding-bottom:9px; font-size:14px; color:#000; z-index:5; }
.cArea .bd .bd02 .p3 a:before { position:absolute; left:50%; margin-left:-45px; bottom:5px; display:block; width:90px; height:8px; content:""; background:#7acff6; z-index:-1; }
*/
.cArea .bd .bd02 .p3 a { display:block; width:220px; font-size:16px; color:#000; }
.cArea .bd .bd02 .p3 a:hover { color:#0091d7; }


.dArea { position:absolute; top:50%; left:0; right:0; margin-top:50px; transform: translateY(-50%); z-index:2; }
.dArea .bd { margin-top:40px; }
.dArea .bd ul { border:1px solid #f1f1f1; }
.dArea .bd ul li { float:left; width:20%; border-right:1px solid #f1f1f1; box-sizing: border-box; cursor:pointer; }
.dArea .bd ul li:nth-child(5n) { border-right:none; }
.dArea .bd ul li:nth-child(n + 6) { border-top:1px solid #f1f1f1; }
.dArea .bd ul li img { -webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray; }
.dArea .bd ul li:hover img { -webkit-filter:grayscale(0%) !important;-moz-filter:grayscale(0%) !important;-ms-filter:grayscale(0%) !important;-o-filter:grayscale(0%) !important;filter:grayscale(0%) !important;filter:gray !important; }

.dArea .bd .bd01 { border:1px solid #f1f1f1; }
.dArea .bd .swiper-slide a { display:block; border:1px solid #f1f1f1; }
.dArea .bd .swiper-pagination-d01 { width:100%; margin-top:25px; text-align:center; }
.dArea .bd .swiper-pagination-d01 .swiper-pagination-bullet { margin:0 5px; opacity:1; background:#777; }
.dArea .bd .swiper-pagination-d01 .swiper-pagination-bullet-active { background:#0091d7; }