@charset "utf-8";
/* CSS Document */

.section{position:relative;overflow:hidden;background:#f7f7f8;font-size:90px;}
.pos_abs{position:absolute;}
.h2{font-size: 46%;color: #000000;text-align: left;height: 1.5;line-height: 1.5;word-spacing:5px; letter-spacing: 5px;}
.p1{font-size: 25%;color: #332c2b;text-align: left;height: 1.6;line-height: 1.6;margin-top:4%;}
.p1 .p1_img{width:5.2%;margin-right:5.3%;}

.h2{width:100%;display:flex;justify-content:space-between;-webkit-justify-content:space-between;}
.info{top:50%;left:9.8%;-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%); transform:translateY(-50%);width:508px;}

#section0 .img_1{bottom:0px;right:0px;width:49%;}
#section0 .info{width:27%;}
#section0 .h2{color:#000000;}
#section0 .p1{ text-align:justify;}
#section0 .p2{ padding-top:8%;}
#section0 .p2 img{width:60%;}
#section0 .p2 span{margin-left:5%;color:#474443;font-size:18%; vertical-align:middle}

#section1 .info{width:27%;}
#section1 .p1{ text-align:justify;}
#section1 .info1{width:55%;right:0px;top:15%;text-align:left;}
#section1 .info1 a{text-align:center;padding-top:8%;display:inline-block;background:top center no-repeat;background-size:auto 53%;width:12%;font-size:22%;font-weight:normal;}
#section1 .info1 .a1{background-image:url(../images/page/sec2_1.png);}
#section1 .info1 .a2{background-image:url(../images/page/sec2_2.png)}
#section1 .info1 .a3{background-image:url(../images/page/sec2_3.png)}
#section1 .info1 .a1:hover{background-image:url(../images/page/sec2_1_1.png);}
#section1 .info1 .a2:hover{background-image:url(../images/page/sec2_2_1.png)}
#section1 .info1 .a3:hover{background-image:url(../images/page/sec2_3_1.png)}

#section1 .imgs{width:55%;right:0px;bottom:0px;height:100%;}
#section1 .img_1{left:0px; bottom:0px;width:83%;}
#section1 .img_2{right:0px; bottom:0px;width:55%;}



#section2 .info{width:27%;}
#section2 .info1{width:100%;left:0px;margin-top:8%;text-align:left;}
#section2 .info1 a{padding-top:16%;display:inline-block;background:top center no-repeat;background-size:auto 53%;font-size:18%;font-weight:normal;text-align:center;}
#section2 .info1 .a1{background-image:url(../images/page/sec3_1.png);width:25%;margin-right:5%;}
#section2 .info1 .a2{background-image:url(../images/page/sec3_2.png);width:30%;}
#section2 .imgs{right:10%;bottom:0px;width:40%;}
#section2 .imgs span{ float:left;}
#section2 .imgs .img1,#section2 .imgs .img3{width:31.5%;}
#section2 .imgs .img2{width:36.8%;}

.box_jw_bg{background-color: rgb(119, 119, 119);opacity: 0.7;cursor: pointer;z-index:1000001;position:absolute;left:0px;top:0px;width:100%;height:100%;}
.box_jw{position:fixed;left:50%;top:50%;z-index:1000002;background:#000;overflow:hidden;width:35%;line-height:0px;padding:2% 0;-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%);}
.box_jw .close{width:30px;height:30px;background:url(../images/page/close.png) center center no-repeat;display:block;position:absolute;z-index:10;right:2%;top:2%;text-indent:-1000px;}
.box_jw .close:hover{ opacity:0.8;}

#ncf .tc_cont{max-width:30%;}
#ncf  .tc_cont .tit{font-size:18px;padding:10px 15px;}
#ncf  .infos{font-size:15px;line-height:1.9;padding:10px 15px;}
.box_jw #player{line-height:normal;color:#fff;}
@media screen and (max-width: 1400px) { 
	.box_jw{width:50%;}
	.box_jw .close{width:25px;height:25px;background-size:100% 100%;}

}
@media screen and (max-width: 1200px) {
	#ncf .tc_cont{max-width:45%;}
} 
@media screen and (max-width: 1000px) { 
	.h2{font-size:52%;}
	.p1{font-size:30%;}
	.info{left:6%;}
	#section0 .img_1{width:45%;}
	#section0 .info{width:35%;}
	#section0 .p2 span{font-size:28%;}
	
	#section1 .info{width:35%;}
	#section1 .imgs{width:50%;}
	#section1 .info1{top:8%;}
	#section1 .info1 a{font-size:30%;width:15%;}
	
	#section2 .info{width:35%;}
	#section2 .info1 .a1,#section2 .info1 .a2{font-size:30%;}
	#section2 .info1 .a2{width:40%}
	#section2 .imgs{right:5%;}
	.box_jw{width:60%;}
}

@media screen and (max-width: 900px) {
	#ncf .tc_cont{max-width:55%;}
} 

/*手机*/
@media screen and (max-width: 640px) { 
	.bg{display:none;}
	
	.h2{font-size:120%;word-spacing:2px; letter-spacing: 2px;}
	.p1{font-size:72%;}
	.info{position:relative;top:13%;left:0px;-moz-transform:translateY(0%);-webkit-transform:translateY(0%); transform:translateY(0%);}
	
	
	#section0 .img_1{width:55%;}
	#section0 .p2{text-align:center;padding-top:5%;}
	#section0 .p2 span{text-align:center; display:block;font-size:70%;margin-top:4%;}
	#section0 .p2 img{width:50%;}
	#section0 .info{width:65%;min-width:200px;margin:auto;}
	
	
	#section1 .info{width:70%;min-width:200px;margin:auto;}
	#section1 .imgs{width:70%;}
	#section1 .info1{position:relative;top:18%;width:100%;left:0px;text-align:center;}
	#section1 .info1 a{font-size:65%;width:25%;padding-top:8%;}

	#section2 .info{width:70%;min-width:200px;margin:auto;}
	#section2 .imgs{width:74%;right:13%;}
	#section2 .imgs span{ overflow:hidden;}
	#section2 .info1{text-align:center;}
	#section2 .info1 .a1, #section2 .info1 .a2{font-size:65%}
	#section2 .info1 .a2{width:45%}
	
	
	.box_jw{width:90%;}
	
	
	.box_jw .close{width:16px;height:16px;background-size:100% 100%;}
	#ncf .tc_cont{max-width:80%;}

}
@media screen and (max-width: 450px) { 
	#ncf .tc_cont .tit{font-size:16px;padding-right:5px;}
	#ncf .infos{font-size:12px;padding-top:0px;}
}


.ans{-moz-transition:transform ease 1s,opacity ease 1s;-webkit-transition:transform ease 1s,opacity ease 1s; transition:transform ease 1s,opacity ease 1s;}
h2{margin-top:2%;transform: translate3d(0px, 50px, 0px); transition-delay: 0.2s; transition-duration: 1200ms;}
h2.active{transform: translate3d(0px, 0px, 0px);}

.p1{margin-top:2%;transform: translate3d(0px, 50px, 0px); transition-delay: 0.3s; transition-duration: 1200ms;}
.p1.active{transform: translate3d(0px, 0px, 0px);}

#section0 .img_1 img{transform:translate3d(100px,0,0); transition-delay: 0.3s; transition-duration: 1200ms;}
#section0 .img_1 img.active{ transform:translate3d(0,0,0);}
#section0 .p2 img{ opacity:0; transition-delay: 0.5s;transform: translate3d(0px, 20px, 0px); }
#section0 .p2 img.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}
#section0 .p2 span{ opacity:0; transition-delay: 0.7s;transform: translate3d(0px, 20px, 0px); }
#section0 .p2 span.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}

#section1 .info1 .a1{ opacity:0; transition-delay: 0.3s;transform: translate3d(0px, 20px, 0px); }
#section1 .info1 .a2{ opacity:0; transition-delay: 0.5s;transform: translate3d(0px, 20px, 0px); }
#section1 .info1 .a3{ opacity:0; transition-delay: 0.7s;transform: translate3d(0px, 20px, 0px); }
#section1 .info1 .a1.active{ opacity:1; transform: translate3d(0px, 0px, 0px);}
#section1 .info1 .a2.active{ opacity:1; transform: translate3d(0px, 0px, 0px); }
#section1 .info1 .a3.active{ opacity:1; transform: translate3d(0px, 0px, 0px);}

#section1 .imgs .img_1{transform:translate3d(-20px,20px,0);transition-delay: 0.5s; transition-duration: 1200ms;}
#section1 .imgs .img_1.active{transform:translate3d(0,0,0);}
#section1 .imgs .img_2{transform:translate3d(20px,20px,0);transition-delay: 0.5s; transition-duration: 1200ms;}
#section1 .imgs .img_2.active{transform:translate3d(0,0,0);}


#section2 .info1 .a1{ opacity:0; transition-delay: 0.3s;transform: translate3d(0px, 20px, 0px); }
#section2 .info1 .a1.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}
#section2 .info1 .a2{ opacity:0; transition-delay: 0.5s;transform: translate3d(0px, 20px, 0px); }
#section2 .info1 .a2.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}

#section2 .imgs .img1{transform:translate3d(-20px,20px,0);transition-delay: 0.5s; transition-duration: 1200ms;}
#section2 .imgs .img1.active{transform:translate3d(0,0,0);}
#section2 .imgs .img3{transform:translate3d(20px,20px,0);transition-delay: 0.5s; transition-duration: 1200ms;}
#section2 .imgs .img3.active{transform:translate3d(0,0,0);}
#section2 .imgs .img2{transform: translate3d(0px, 20px, 0px); transition-delay: 0.5s; transition-duration: 1200ms;}
#section2 .imgs .img2.active{transform:translate3d(0,0,0);}




@media screen and (max-width: 640px) { 
	h2{transform: translate3d(0px, 20px, 0px);}
	h2.active{transform: translate3d(0px, 0px, 0px);}
	
	.p1{transform: translate3d(0px, 20px, 0px); }
	.p1.active{transform: translate3d(0px, 0px, 0px);}
	
	#section0 .img_1 img{transform:translate3d(20px,0,0);}
	#section0 .img_1 img.active{ transform:translate3d(0,0,0);}
	#section0 .p2 img{ opacity:0; transform: translate3d(0px, 20px, 0px); }
	#section0 .p2 img.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}
	#section0 .p2 span{ opacity:0; transition-delay: 0.7s;transform: translate3d(0px, 20px, 0px); }
	#section0 .p2 span.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}
	
	#section1 .info1 .a1{ opacity:0; transition-delay: 0.3s;transform: translate3d(0px, 20px, 0px); }
	#section1 .info1 .a2{ opacity:0; transition-delay: 0.5s;transform: translate3d(0px, 20px, 0px); }
	#section1 .info1 .a3{ opacity:0; transition-delay: 0.7s;transform: translate3d(0px, 20px, 0px); }
	#section1 .info1 .a1.active{ opacity:1; transform: translate3d(0px, 0px, 0px);}
	#section1 .info1 .a2.active{ opacity:1; transform: translate3d(0px, 0px, 0px); }
	#section1 .info1 .a3.active{ opacity:1; transform: translate3d(0px, 0px, 0px);}
	
	#section2 .info1 .a1{ opacity:0; transition-delay: 0.3s;transform: translate3d(0px, 20px, 0px); }
	#section2 .info1 .a1.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}
	#section2 .info1 .a2{ opacity:0; transition-delay: 0.5s;transform: translate3d(0px, 20px, 0px); }
	#section2 .info1 .a2.active{ opacity:1;transform: translate3d(0px, 0px, 0px);}
	
	#section2 .imgs .img1{transform:translate3d(-20px,20px,0);transition-delay: 0.5s; transition-duration: 1200ms;}
	#section2 .imgs .img1.active{transform:translate3d(0,0,0);}
	#section2 .imgs .img3{transform:translate3d(20px,20px,0);transition-delay: 0.5s; transition-duration: 1200ms;}
	#section2 .imgs .img3.active{transform:translate3d(0,0,0);}
	#section2 .imgs .img2{transform: translate3d(0px, 20px, 0px); transition-delay: 0.5s; transition-duration: 1200ms;}
	#section2 .imgs .img2.active{transform:translate3d(0,0,0);}


	
	
}

.tc_bg{background-color: rgb(119, 119, 119);}