@charset "utf-8";
/* CSS Document */
*{ margin:0; padding:0; border:0;}
body{width: 100vw;height: 100vh; margin:0 auto;overflow: hidden; font-size:12px; font-family:"微软雅黑"; text-align:center; line-height:20px; background:url(../images/bg.jpg) no-repeat; background-size: 100% 100%;}
h1{ font-size:14px;}
li{ list-style:none;}
A {TEXT-DECORATION:none;}

.sp_header{ position:fixed;right:20px;top: 0px; z-index:1000;}
.sp_nav{position:relative;cursor:pointer;width:276px;height:123px; background:url(../images/nav_a.png) no-repeat;}
.sp_nav span{display:block;width:29px;height:16px;position:absolute;left:130px;top: 20px; transition:all ease 0.35s;background: url(../images/nav_open.png) no-repeat;}
.sp_nav_se {height:1rem;background:none;}
.sp_nav_se span{top: 300px; background: url(../images/nav_close.png) no-repeat;}

.sjj_nav{position:fixed;z-index:888;width:1rem;height: 1rem;top:-0.5rem;right:-0.5rem; transition:height ease 0.5s;}
.nav_show{top:0;right:20px;width:276px;height: 374px;background:url(../images/nav_b.png) no-repeat;}
.sjj_nav .menu{height: 0;}
.nav_show .menu{height: 100%; }

.menu {display: block; width: 223px;overflow: hidden;margin: 0 auto;padding: 40px 0 0 10px;}
.menu li {width: 223px;height: 42px; margin:8px 0;  }
.menu li:nth-child(1){background: url(../images/home.png) center no-repeat;}

.menu li.n1{display: none;background: url(../images/nav_01.png) center no-repeat;}
.menu li.n1.active{background: url(../images/nav_01_curr.png) center no-repeat;}

.menu li:nth-child(3){background: url(../images/nav_02.png) center no-repeat;}
.menu li.active:nth-child(3) {background: url(../images/nav_02_curr.png) center no-repeat;}

.menu li:nth-child(4){background: url(../images/nav_03.png) center no-repeat;}
.menu li.active:nth-child(4) {background: url(../images/nav_03_curr.png) center no-repeat;}

.menu li:nth-child(5){background: url(../images/nav_04.png) center no-repeat;}
.menu li.active:nth-child(5) {background: url(../images/nav_04_curr.png) center no-repeat;}

.menu li a {display: block;height: 100%; font-size: 0; color: #fff; text-indent: -9999px;}


.circle-ripple {
	z-index: 888;
	background-color:#fff;
	width:1.5em;
	height:1.5em;
	border-radius:50%;
	 aspect-ratio: 1 / 1;
-webkit-animation:ripple .7s linear infinite;
	animation:ripple .7s linear infinite;
	cursor:pointer;
}

.circle-ripple:hover .pop {display: block;}
@-webkit-keyframes ripple {
	0% {
	box-shadow:0 0 0 0 rgba(255,255,255,0.4),0 0 0 1em rgba(255,255,255,0.4),0 0 0 2em rgba(255,255,255,0.4),0 0 0 3em rgba(255,255,255,0.4)
}
100% {
	box-shadow:0 0 0 1em rgba(255,255,255,0.4),0 0 0 2em rgba(255,255,255,0.4),0 0 0 3em rgba(255,255,255,0.4),0 0 0 5em rgba(255,255,255,0)
}
}
@keyframes ripple {
	0% {
	box-shadow:0 0 0 0 rgba(255,255,255,0.4),0 0 0 1em rgba(255,255,255,0.4),0 0 0 2em rgba(255,255,255,0.4),0 0 0 3em rgba(255,255,255,0.4)
}
100% {
	box-shadow:0 0 0 1em rgba(255,255,255,0.4),0 0 0 2em rgba(255,255,255,0.4),0 0 0 3em rgba(255,255,255,0.4),0 0 0 5em rgba(255,255,255,0)
}
}

@keyframes heartbeat{
	0% {
    transform: scale(1);
    opacity: .1;
}
25% {
    transform: scale(1.4);
    opacity: 1;
}
50% {
    transform: scale(1);
    opacity: .1;
}
75% {
    transform: scale(1.4);
    opacity: 1;
}
}
.pop{display: none;position: absolute;left:-5vw;top: 1vw;width: 15vw;height: auto;overflow: hidden;padding: 15px;text-align:left;border-radius: 0.5vw; background: rgba(0,37,65,0.7);}
.pop p{ font-size: 1vw;color: #fff;line-height: 180%;}
.pop p strong{display: block; font-size: 1.2vw;color: #fff;line-height: 180%;text-align: center;}

.p2_c1{position: absolute;left: 35%;top: 25%;}
.p2_c2{position: absolute;right: 32%;bottom: 30%;}
.p2_c3{position: absolute;left: 38%;top: 25%;}
.p2_c4{position: absolute;left: 13%;top: 50%;z-index: 111;}
.p2_c5{position: absolute;right: 18%;top: 20%;}

.p3_c1{position: absolute;left: 45%;top: 5%;}
.p3_c2{position: absolute;left: 35%;top: 25%;}
.p3_c3{position: absolute;right: 27%;top: 13%;}
.p3_c4{position: absolute;left: 61%;top: 37%;z-index: 111;}
.p3_c5{position: absolute;left: 53%;top: 53%;}
.p3_c6{position: absolute;left: 18%;top: 63%;}
.p3_c7{position: absolute;right: 23%;top: 64%;}

.p4_c1{position: absolute;right: 13%;top:30%;}
.p4_c2{position: absolute;right: 28%;top: 45%;z-index: 112;}
.p4_c3{position: absolute;left: 33%;top: 70%;z-index: 111;}
.p4_c4{position: absolute;right:18%;bottom:13%;z-index: 115;}
.p4_c5{position: absolute;right: 15%;top: 50%;z-index: 111;}

.banner{ position: relative;clear:both;width: 100vw; height:100vh; overflow: hidden; margin:0 auto;background: url(../images/default.png) center top no-repeat; background-size: 75%; opacity: 0; }
.banner .wrap{ position: absolute;left:0 ; bottom: 0; width: 70vw; height:75vh;}
.banner .tonggu {width:104rem;height:103rem;position: absolute;left:-20rem;bottom:-51rem;animation: spin 50s infinite linear ;z-index: 1;}
@keyframes spin {
  0% {
    transform: none;
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes pa {
   45% {
   transform: translate(0,0);
  }
  
  60% {
      transform: translate(-30px,-30px)
  }
}

@keyframes textScroll {
49% {
		transform: translateY(-100%);
	}
	50% {
		opacity: 0;
		transform: translateY(100%);
	}
	51% {
		opacity: 1;
	}
}


@keyframes swing {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}

	50% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg)
	}

	100% {
		-webkit-transform: rotate(0);
		transform: rotate(0)
	}
}

@keyframes run {
    0% {
		transform: translateX(-100%);
	}
	100% {		
		transform: translateX(100%);
	}

}

@keyframes boat {
    0% {
		transform: translateX(-30%);
	}
	100% {		
		transform: translateX(30%);
	}

}

@keyframes fog {
    0% {
		transform: translateY(0) scale(0.8);
	}
	100% {		
		transform: translateY(-60%) scale(1.5);
		opacity: 0;
	}

}

.banner .notes1 {z-index: 5; position: absolute;right:38%;top:12%;width:6%; height:6%;background: url(../images/yf01.png) left top  no-repeat;background-size: contain;  opacity: 0; animation: textScroll 2s linear infinite;}
.banner .notes2{z-index: 5; position: absolute;right:35%;top:16%;width:5%; height:5%;background: url(../images/yf02.png) left top  no-repeat;background-size: contain; opacity: 0; animation: textScroll 2s linear 1s infinite;}
.banner .lsj {width:28%;height:40%;position: absolute;left:43%;top:23%; z-index: 5;background: url(../images/an01.gif) center top no-repeat;background-size: contain;}
.bg-box-1 .notes1 {z-index: 5; position: absolute;right:45%;top:10%;width:6%; height:6%;background: url(../images/yf01.png) left top  no-repeat;background-size: contain;  opacity: 0; animation: textScroll 2s linear infinite;}
.bg-box-1 .notes2{z-index: 5; position: absolute;right:40%;top:14%;width:5%; height:5%;background: url(../images/yf02.png) left top  no-repeat;background-size: contain; opacity: 0;transform: rotate(-45deg); animation: textScroll 2s linear 1s infinite;}
.bg-box-1 .el-1{position: absolute;right:3%;top:26%;width: 30%;height: 80%; background: url(../images/an02.gif) top left no-repeat; background-size: contain;z-index:5;}
.bg-box-1 .el-1::after{display: block; width: 100%;height: 100%;content: " "; background:url(../images/an02.png)  top left no-repeat;background-size:contain;z-index:6; }
.bg-box-1 .el-2{position: absolute;right:9%;top:0;width: 40%;height: 80%; background: url(../images/part1_02.png) top left no-repeat; background-size: contain;z-index:4;}
.bg-box-1 .el-3{position: absolute;right:0%;top: 10%;width: 28%;height: 80%; background: url(../images/part1_03.png)  top left no-repeat; background-size: contain;z-index:3;}
.bg-box-1 .boat{position: absolute;left:25%;top: 55%;width: 20%;height: 20%; background: url(../images/boat.png)  top left no-repeat; background-size: contain;z-index:3;animation: run 20s linear infinite alternate;}


.bg-box-2 .hs1 {z-index: 5; position: absolute;left:5%;top:45%;width:10%; height:10%;background: url(../images/hs01.png) left top  no-repeat;background-size: contain;   animation: pa 2s ease-in infinite;}
.bg-box-2 .hs2 {z-index: 5; position: absolute;left:29%;top:18%;width:10%; height:10%;background: url(../images/hs02.png) left top  no-repeat;background-size: contain;   animation: pa 2s ease-in 1s infinite;}
.bg-box-2 .hs3 {z-index: 5; position: absolute;left:40%;top:17%;width:8%; height:8%;background: url(../images/hs03.png) left top  no-repeat;background-size: contain;   animation: pa 2s ease-in  infinite;}
.bg-box-2 .hs4 {z-index: 5; position: absolute;left:45%;top:21%;width:8%; height:8%;background: url(../images/hs04.png) left top  no-repeat;background-size: contain;   animation: pa 2s ease-in 1s infinite;}
.bg-box-2 .hs5 {z-index: 6; position: absolute;right:2%;bottom:18%;width:20%; height:45%;background: url(../images/an03.gif) left top no-repeat;background-size: contain; }

.bg-box-3 .ele-01{position: absolute;right:32%;top:28%;width:16%;height: 42%; background: url(../images/p3_07.png) top left no-repeat; background-size: contain;z-index:5;}
.bg-box-3 .ele-02{position: absolute;right:22%;top:28%;width:8vw;height: 30%; background: url(../images/part3_02.png) top left no-repeat; background-size: contain;z-index:4;}
.bg-box-3 .ele-03{position: absolute;right:18%;top:12%;width:15vw;height: 15vw; background: url(../images/part3_03.png) top left no-repeat; background-size: contain;z-index:3;animation: spin 20s infinite linear ;}
.bg-box-3 .ele-04{position: absolute;right:7%;top:3%;width:20%;height: 70%; background: url(../images/an05.gif) top left no-repeat; background-size: contain;z-index:7;}
.bg-box-3 .ele-05{position: absolute;right:19%;top:32%;width:26%;height: 40%;background: url(../images/p3_an01.gif) top left no-repeat;background-size:contain;z-index: 6;}

.bg-box-4 .xiuqiu{z-index: 6; position: absolute;right:10%;top:-1%;width:30%; height:40%;background: url(../images/xq.png) left top  no-repeat;background-size: contain; transform-origin: 10% 0 ; animation: swing 3s ease-in  infinite;}
.bg-box-4 .rw{z-index: 5; position: absolute;right:2%;top:2%;width:35%; height:88%;background: url(../images/part4_01.png) right top  no-repeat;background-size: contain;  }
.bg-box-4 .rw2{z-index: 4; position: absolute;right:2%;top:8%;width:25%; height:63%;background: url(../images/an04.png) right top  no-repeat;background-size: contain;  }
/*.bg-box-4 .rw2::after{display: block; width: 100%;height: 100%;content: " "; background:url(../images/an04.png)  top right no-repeat;background-size:contain;}*/
.bg-box-4 .tg{z-index: 3; position: absolute;right:15%;top:19%;width:18vw; height:18vw;background: url(../images/part4_02.png) left top  no-repeat;background-size: contain;   animation: spin 20s linear infinite;}


.bg {position: absolute;top:0;left:10%;width:80%;height:90%; display: none;}
.bg-box-1{background: url('../images/part1_bg.png') no-repeat;background-size: 100% auto;background-position: center center;}
.bg-box-2{background: url('../images/part2_bg.png') no-repeat;background-size: 100% auto;background-position: center center;}
.bg-box-3{background: url('../images/part3_bg.png') no-repeat;background-size: 100% auto;background-position: center center;}
.bg-box-4{background: url('../images/part4_bg.png') no-repeat;background-size: 100% auto;background-position: center center;}


.control{position: absolute;overflow: hidden;bottom:-50%; left:50%; margin-left:-40vw;width:80vw;height:30vh;z-index: 666;}
.control ul {display: flex;justify-content: center;height: 100%; }
.control li{display: block;height: 100%; text-align: center; cursor: pointer;	}
.control li a{display: block; width: 100%;height: 100%; }
.control li.n01{position: relative;width:15%;background: url(../images/nav01.png) center bottom no-repeat; background-size: contain;}
.control li.n01.curr{background: url(../images/nav01_curr.png)  center bottom  no-repeat;background-size: contain;}

.control li.n01 span{display: none;position: absolute;left:20%;top: 0;  width:110px;height: 40px;padding-left: 10px; font-size: 18px;color:#fff;line-height: 40px; background: #111;}
.control li.n01:hover span{display: block; }


.control li.n02{width:28%; background: url(../images/nav02.png) center bottom  no-repeat; background-size: contain;}
.control li.n02.curr{background: url(../images/nav02_curr.png) center bottom  no-repeat;background-size: contain;}

.control li.n03{width:18%;background: url(../images/nav03.png) center bottom  no-repeat; background-size: contain;}
.control li.n03.curr{background: url(../images/nav03_curr.png) center bottom  no-repeat;background-size: contain;}

.control li.n04{width:25%; background: url(../images/nav04.png) center bottom  no-repeat; background-size: contain;}
.control li.n04.curr{background: url(../images/nav04_curr.png) center bottom  no-repeat;background-size: contain;}


.bg01{position: absolute;width: 100vw;height: 100vh;overflow: hidden;margin: 0 auto;background: url(../images/bg01.jpg) no-repeat;background-size: 100% 100%;z-index: 999;}
.bg01 p{padding-top: 13%; font-size:2vw;   color:#fff; line-height:200%;text-align: center;}
.bg01 h3{display: block;width: 10%;height: 8%;margin:5% auto 0 auto;background: url(../images/i.png) no-repeat;background-size: contain;cursor: pointer;}

.bg1{position: relative;width: 100vw;height: 0;overflow: hidden;margin: 0 auto;background: url(../images/bg1.jpg) no-repeat;background-size: 100% 100%;}
.p1_a{position: absolute;left:5%;bottom: 1%; width: 15%;height: 65%;background: url(../images/p1_a.png) left bottom no-repeat;background-size: contain;}
.p1_b{position: absolute;right:0%;bottom: 0%; width: 22%;height: 85%;background: url(../images/an02.gif) right bottom no-repeat;background-size: contain;}
.p1_b .notes1 {z-index: 5; position: absolute;left:15%;top:10%;width:10%; height:10%;background: url(../images/yf01.png) left top  no-repeat;background-size: contain;  opacity: 0; animation: textScroll 2s linear infinite;}
.p1_b .notes2{z-index: 5; position: absolute;left:18%;top:12%;width:10%; height:10%;background: url(../images/yf02.png) left top  no-repeat;background-size: contain; opacity: 0; animation: textScroll 2s linear 1s infinite;}

.p1_c{position: absolute;left:1%;top: 3%; width: 19%;height:40%; }
.p1_c img{ width:100%;height:auto; }
.p1_con{position: absolute;left: 20%;top:5%;width:56%;height: 95%;  }
.p1_con .vPlay {width: 100%;height: 50%;  }
.p1_con .vList {width: 100%;height: 20%;margin-top: 1%; }
.p1_con .pic_con{width:100%;height: 100%; position:relative}
.p1_con .pic_lists{float:left;width:200%;height:100%;overflow:hidden;position:absolute;top:0px;left:0px}
.p1_con .btn_change{width:3%;height:25%;position:absolute;text-indent:-9999px;cursor:pointer;}
.p1_con .left_btn{background:url(../images/arr_left.png) no-repeat;background-size: contain;top:20%;left:-5%}
.p1_con .right_btn{background:url(../images/arr_right.png) no-repeat;background-size: contain;top:20%;right:-5%;}

.p1_con .pic_content{overflow:hidden;height:100%;float:left;width:100%;position:relative; }
.p1_con .pic_content ul li{float:left;width:9%;height:20vh;text-align:left;margin:0 1.3% 0 0; cursor: pointer;}
.p1_con .pic_content ul li img{width:100%;height:auto;}
.p1_con .pic_content ul li p{ overflow: hidden; font-size:0.8vw; font-weight:300; color:#fff; line-height:120%;  display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3; }
.p1_con .pic_content li.current_play p a{color: #E8FF03; }

.sec1,.sec2,.sec3 {clear: both; width: 100%;height:auto; overflow: hidden;margin: 0 auto;padding: 0;position: relative;}
.sec1 img,.sec2 img,.sec3 img {display: block; width: 100%;height:auto; overflow: hidden;margin: 0 auto;padding: 0;}

.mask {position: absolute;right: 20%;top: 20%;z-index: 555;
  width: 340px;
  height: 196px;
  -webkit-animation: move 40s infinite;
          animation: move 40s infinite;
  background-image: url(../images/bg1.jpg);
  background-size: cover;
  -webkit-mask: url(../images/p2_an02.gif);
          mask: url(../images/p2_an02.gif);
  -webkit-mask-size: cover;
          mask-size: cover;
}

.p21{position: absolute;right:4%;bottom:16.5%;width: 40%;height: 40%;background: url(../images/p2_an01.gif) right bottom no-repeat;background-size:contain;}
.p21::after{display: block; width: 100%;height: 100%;content: " "; background:url(../images/p2_an01.png) right bottom no-repeat;background-size:contain; }
.p22{position: absolute;left:3%;bottom:35%;width: 15%;height: 40%;background: url(../images/p2_an03.gif) right bottom no-repeat;background-size:contain;}
.p22::after{display: block; width: 100%;height: 100%;content: " "; background:url(../images/p2_an03.png) right bottom no-repeat;background-size:contain; }
.p23{position: absolute;right:2%;bottom:52.5%;width: 18%;height: 40%;background:url(../images/p2_an02.gif) right bottom no-repeat;background-size:contain;   }
.p23::after{display: block; width: 100%;height: 100%;content: " "; background:url(../images/p2_an02.png) right bottom no-repeat;background-size:contain;  }
.p24{position: absolute;left:40%;top:69%;width: 5%;height: 5%;background: url(../images/hs02.png) left bottom no-repeat;background-size:contain; animation: pa 2s ease-in  infinite;}
.p25{position: absolute;left:10.5%;top:92%;width: 6%;height: 6%;background: url(../images/hs01.png) left bottom no-repeat;background-size:contain; animation: pa 2s ease-in 0.5s infinite;}
.p26{position: absolute;left:52%;top:93%;width: 4%;height: 4%;background: url(../images/hs03.png) left bottom no-repeat;background-size:contain; animation: pa 2s ease-in 0.8s infinite;}
.p27{position: absolute;left:55%;top:96%;width: 4%;height: 4%;background: url(../images/hs04.png) left bottom no-repeat;background-size:contain; animation: pa 2s ease-in 1s infinite;}
.p28{position: absolute;left:57%;top:23%;width:30%;height: 12%;text-align: left;}
.p29{position: absolute;left:17%;top:76%;width:35%;height: 12%;text-align: left;}
.p28 p,.p29 p{font-size:2vw;   color:#000; line-height:160%;}
.p210{position: absolute;left:0%;top:1%;width: 53%;height: 67%;background: url(../images/p2_09.png) left top no-repeat;background-size:contain;}

.p31{position: absolute;left:40%;top:0%;width: 13%;height: 20%;background: url(../images/p3_an04.gif) top left no-repeat;background-size:contain;}
.p32{position: absolute;left:9%;top:13%;width:40%;height: 70%;background: url(../images/p3_an03.gif) top left no-repeat;background-size:contain;}
.p32::after{display: block; width: 100%;height: 100%;content: " "; background:url(../images/p3_an03.png) top left no-repeat;background-size:contain;  }
.p33{position: absolute;left:49%;top:27%;width:25%;height: 13%;background: url(../images/p3_an01.gif) top left no-repeat;background-size:contain;z-index: 5px;}
.p33::after{display: block; width: 100%;height: 100%;content: " "; background:url(../images/p3_an01.png) top left no-repeat;background-size:contain;  }
.p34{position: absolute;right:4%;top:12%;width:25%;height: 70%;background: url(../images/p3_a1.png) top left no-repeat;background-size:contain;}
.p35{position: absolute;left:10%;top:60%;width:15%;height: 20%;background: url(../images/p3_an02.gif) top left no-repeat;background-size:contain;}
.p36{position: absolute;left:43%;top:47%;width:24%;height: 30%;background: url(../images/p3_an05.gif) top left no-repeat;background-size:contain;}
.p37{position: absolute;right:7%;top:42%;width:22%;height: 50%;background: url(../images/an05.gif) top left no-repeat;background-size:contain;}
.p38{position: absolute;left:4%;top:86%;width:20%;height: 30%;background: url(../images/p3_a3.png) top left no-repeat;background-size:contain;}
.p39{position: absolute;right:5%;top:84%;width:20%;height: 30%;background: url(../images/p3_a4.png) top left no-repeat;background-size:contain;}
.p310{position: absolute;left:53.6%;top:89.3%;width:7vw;height: 30%; background: url(../images/p3_a5.png) top left no-repeat; background-size: contain;z-index:4;}
.p311{position: absolute;left:51%;top:85%;width:12vw;height: 12vw; background: url(../images/part3_03.png) top left no-repeat; background-size: contain;z-index:3;animation: spin 20s infinite linear ;}
.p312{position: absolute;left:48%;top:12.6%;width:30%;height: 12%;text-align: left;}
.p312 p{font-size:1.8vw;   color:#000; line-height:200%;}
.p313{position: absolute;right:25%;top:11.5%;width:5%;height: 8%; background: url(../images/p3_a6.png) top left no-repeat; background-size: contain;z-index:3;animation: pa 3s infinite linear ;}
.p314{position: absolute;left:46%;top:25%;width:10%;height: 20%; background: url(../images/p3_07.png) top right no-repeat; background-size: contain;z-index:3;}

.p41{position: absolute;left:41%;top:-2%;width:10%;height: 40%;background: url(../images/xq.png) top left no-repeat;background-size:contain;transform-origin: 10% 0 ; animation: swing 3s ease-in  infinite;}
.p42{position: absolute;right:5%;top:35%;width:30%;height: 60%;background: url(../images/p4_an01.gif) top left no-repeat;background-size:contain;z-index: 111;}
.p43{position: absolute;left:0;top:60%;width:45%;height: 45%;background: url(../images/p4_01.png) top left no-repeat;background-size:contain;}
.p44{position: absolute;right:5%;bottom:0%;width:30%;height: 6%;background: url(../images/boat.png) top left no-repeat;background-size:contain;animation: boat 5s linear infinite alternate;}
.p45{position: absolute;left:9%;top:1%;width:20%;height: 88%;background: url(../images/p4_06.png) top left no-repeat;background-size:contain;}
.p46{position: absolute;left:47%;top:10%;width:45%;height: 12%;text-align: left;}
.p46 p{font-size:1.8vw;   color:#000; line-height:200%;}
.p47{position: absolute;left:13%;top:1%;width:25%;height: 45%;background: url(../images/an04.gif) top left no-repeat;background-size:contain;}
.p48{position: absolute;left:0;top:23%;width:100%;height: 30%;background: url(../images/p4_07.png) top left no-repeat;background-size:contain;}
.p49{position: absolute;right:0;top:15%;width:30%;height: 40%;background: url(../images/p4_08.png) top left no-repeat;background-size:contain;}

.p2_con{position: absolute;left: 20%;top: 0;width:60%;height: 95%;  }
.p2_con li{float: left;width:32%;height: 20%;overflow: hidden;margin: 0 5% 0 0; text-align: center;}
.p2_con li img{width:100%;height:auto;transition: all linear 0.3s;transform: scale(0.95) }
.p2_con li:hover img{transform: scale(1) rotate(5deg); }
.p2_con li p{margin-top: 10px; font-size:1.3vw; font-weight:200; color:#fff; line-height:150%;}
.p2_con li p a{ font-size:1.3vw;  color:#fff; }
.p2_con li:nth-child(1){width:55%;}
.p2_con li:nth-child(1) img{float: left; width:60%;margin: 0 10px 0 0;}
.p2_con li:nth-child(1) p{margin-top: 20%;text-align: left;}

.p2_con li:nth-child(3){width:45%;margin: 0 25% 0 15%;}
.p2_con li:nth-child(3) img{float: right; width:60%;margin: 0 0 0 10px;}
.p2_con li:nth-child(3) p{text-align: right;margin-top: 12%;}

.p2_con li:nth-child(5){width:55%;}
.p2_con li:nth-child(5) img{float: right; width:60%;margin: 0 0 0 10px;}
.p2_con li:nth-child(5) p{text-align: right;margin-top: 30%;}

.more{position: absolute;right:0;bottom: 0%;display: block;width:20%;height: 10%;overflow: hidden;background:url(../images/more.png) no-repeat;background-size: contain;}
.p4_con2 .more{width:28%;height: 10%;}
.p2_con  .more{right: -10%;}

.p3_con{position: absolute;left: 22.5%;top: 0;width:55%;height: 90%;overflow: hidden; }
.p3_con li{position: absolute;  overflow: hidden; text-align: left;}
.p3_con li:hover p{display: block;}
.p3_con li img{width:100%;height:auto;transition: all linear 0.3s; }
.p3_con li:hover img{transform: scale(1.05); }
.p3_con li p{display: none; position: absolute;left: 0;bottom: 0;width: 90%;overflow: hidden;padding:2% 5%; font-size:22px; font-weight:200; color:#fff; line-height:150%;background: rgba(0,0,0,0.5);transition: all linear 0.5s;}
.p3_con li p a{ font-size:22px;  color:#fff; }
.p3_con li:nth-child(1){width:36vw;height: 18vw; top: 0;left: 0;}
.p3_con li:nth-child(2){width:18vw;height: 18vw; top: 0;left: 37vw;}
.p3_con li:nth-child(3){width:18vw;height: 18vw; top: 19vw;left: 0%;}
.p3_con li:nth-child(4){width:36vw;height: 18vw;top: 19vw;left: 19vw;}
.p3_con li:nth-child(5){width:18vw;height: 37vw ;top: 0;left: 55vw;}

.p4_con{position: absolute;left: 20%;top:45%;width:60%;height: 100%;overflow: hidden;z-index: 110; }
.p4_con li{width:45%;height: 25%;overflow: hidden;margin: 0 5% 5% 0; text-align: left;}
.p4_con li img{width:100%;height:auto;transition: all linear 0.3s; transform: scale(0.95);}
.p4_con li:hover img{transform: scale(1) rotate(5deg); }
.p4_con li p{margin-top: 10px; font-size:28px; font-weight:200; color:#000; line-height:36px;}
.p4_con li p a{ font-size:28px;  color:#000; }
.p4_con li:nth-child(1){width:70%;margin: 0 5% 5% 0;}
.p4_con li:nth-child(1) img{float: left; width:60%;margin: 0 10px 0 0;}
.p4_con li:nth-child(1) p{margin-top: 15%;}
.p4_con li:nth-child(2){float: right;}
.p4_con li:nth-child(3){clear: both; padding: 18% 0 0 0;}


.p4_con2{position: absolute;left: 35%;top: 6%;width:40%;height: 83%; }

.mmd {z-index:55; width:100%; }
.mmd li.swiper-slide {
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
/*
        -webkit-align-items: center;
        align-items: center;
*/
      }
.mmd li.swiper-slide:nth-child(even){margin-top: 10%;}
 
.mmd li.swiper-slide img {  width: 100%;  height: auto;  display: block;  }
 
.mmd li p{display: none; position: absolute;left:0;bottom: 0;width: 90%;overflow: hidden;padding:2% 5%; font-size:22px; font-weight:200; color:#fff; line-height:150%;background: rgba(0,0,0,0.5);transition: all linear 0.5s;}
.mmd li p a{ font-size:22px;  color:#fff; }
.mmd li:hover p{display: block;}


.bg22{width: 100vw;height: 100vh;overflow: hidden;margin: 0 auto;background: url(../images/p2_bg.jpg) no-repeat;background-size:100% 100%;}
.bg22::before{position: absolute;left: 0;top:2%;content: " ";  width: 27vw;height: 85vh;background: url(../images/p2_05.png) no-repeat;background-size:contain;}
.bg22::after{position: absolute;right: 0;bottom:0;content: " ";  width: 27vw;height: 45vh;background: url(../images/p2_04.png) right bottom no-repeat;background-size:contain;}

.bg32{width: 100vw;height: 100vh;overflow: hidden;margin: 0 auto;background: url(../images/p3_bg.jpg) no-repeat;background-size:100% 100%;}
.bg32::before{position: absolute;left: 0;top:2%;content: " ";  width: 27vw;height: 100vh;background: url(../images/p3_05.png) no-repeat;background-size:contain;}
.bg32::after{position: absolute;right: 0;bottom:0;content: " ";  width: 27vw;height: 65vh;background: url(../images/p3_06.png) right bottom no-repeat;background-size:contain;}

.bg42{width: 100vw;height: 100vh;overflow: hidden;margin: 0 auto;background: url(../images/p4_bg.jpg) no-repeat;background-size:100% 100%;}
.bg42::before{position: absolute;left: 0;top:0;content: " ";  width: 30vw;height: 100vh;background: url(../images/p4_05.png) no-repeat;background-size:contain;}
.bg42::after{position: absolute;right: 0;bottom:0;content: " ";  width: 27vw;height: 65vh;background: url(../images/p4_04.png) right bottom no-repeat;background-size:contain;}


/*video列表*/
.g-video{clear:both;width:60vw; height:100%; overflow: hidden; margin-left:-28vw;position: absolute;left: 50%;top: 5%;z-index: 888;}
.g-video h2{height:5vh; overflow: hidden;font-size:1.5vw; font-weight:300; color:#000; line-height:5vh;text-align: right; }
.g-video h2 a{font-size:1.5vw;  color:#000;  }
.g-video .Cont{ height:100%; overflow:hidden;padding:10px 0 0 0px;  }
.g-video .Cont ul{ display: block; height:80vh;overflow-y: auto;overflow-x: hidden; }
.g-video .Cont ul::-webkit-scrollbar {width: 13px;}
.g-video .Cont ul::-webkit-scrollbar-thumb {border-radius:5px;background: #6291b6;}
.g-video .Cont ul::-webkit-scrollbar-track {border-radius:5px;background: #cdc1b6;}
.g-video .Cont li { float:left; width:27%;height: 38%;  margin:2% 5% 0 0;text-align:left; }
.g-video .Cont li:nth-child(9n+1),.g-video .Cont li:nth-child(9n+6),.g-video .Cont li:nth-child(9n+8){  width:20%; }
.g-video .Cont li:nth-child(9n+2),.g-video .Cont li:nth-child(9n+4),.g-video .Cont li:nth-child(9n+9){  width:35%; }

.g-video .Cont li img{display:block; width:100%; height:auto;border-radius:5%;}
.g-video .Cont li p{overflow: hidden;padding: 10px 0 0; font-size:1vw; font-weight:300; color:#000; line-height:120%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.g-video .Cont li p a{ color:#000;}
.g-video .Cont li p a:hover{color:#bd0000;}
 


/*footer 底部信息*/
.footer{ clear:both;  height:230px; overflow: hidden; margin:0 auto;background: #f5f5ed; }
.footer .Cont{ height:100%;overflow:hidden; padding-top:40px; text-align:center;  }
.footer .Cont p{clear: both;margin:30px 0; font-size:18px; font-weight:200; color:#000; line-height:48px;}