@charset "utf-8";
body{
	font-family:"Microsoft Yahei","SimSun";
	font-size:14px;
	color:#000;
}
#body1{
	font-family:"Microsoft Yahei","SimSun";
	font-size:16px;
	color:#000;
	background:#fff;
	white-space: nowrap;
    overflow-x: scroll;
	overflow-y: hidden;
}

@media only screen and (max-height: 938px) { body{ font-size: 15px !important; } }
@media only screen and (max-height: 875px) { body{ font-size: 14px !important; } }
@media only screen and (max-height: 813px) { body{ font-size: 13px !important; } }
@media only screen and (max-height: 750px) { body{ font-size: 12px !important; } }
@media only screen and (max-height: 688px) { body{ font-size: 11px !important; } }
@media only screen and (max-height: 625px) { body{ font-size: 10px !important; } }

a{
	color:#000;
	/*transition:all 0.2s;*/
}

a:hover{
	color:#c41a1a !important;
}

.fw{
	color:#fff;
}

.fw a{
	color:#fff;
}

.fw a:hover{
	color:#dfdfdf !important;
}

img{
	display:block;
	max-width: 100%;
	max-height: 100%;
}
h1,h2,h3,h4,h5{
	font-family:"Microsoft Yahei","SimHei";
	overflow:hidden;
}

p,li{
	overflow:hidden;
}




.abs{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 1;
}

.abs0{
	position: absolute;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity: 0;
}



.page{
	position: relative;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
#page1{ background-color:#000; }
#page2{background-image:url(../images/page2.jpg);}




#app{
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;
}
#movie1{
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    object-fit: cover;
    object-position: center center;
}
#wenwu-img{
	position: absolute;
	top:8.9%;
	width: 39.11%;
	height: 39.3%;
	left: 30.31%;
}
#container{
	width:18%;
	height:3.6em;
	position:absolute;
	left:41%;
	top:44.87%;
	border:1px solid #cbb179; 
	background-color:rgba(30,9,1,0.65);
	border-radius:2em;
}
#btn{
    width: 3.4em;
    height: 3.4em;
    background: lightblue;
    position: absolute;
    top: 0.1em;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-drag: none;
	background:#efd087;
	border-radius:1.7em;
	cursor:pointer;
	z-index: 100;
}
.tdhk{
	width:33.6%;
	height:42.1%;
	top:28.95%;
	left:33.2%;
	background-image:url(../images/tdhk.png);
}

#page1-1{
	width:100%;
	height:100%;
	position:absolute;
	background:url(../images/page1-1.jpg) center center no-repeat;
	background-size: cover;
	display: none;
}


.topic1{
	width:10.26%;
	height:36.94%;
	top:9.54%;
	left:45.58%;
	background-image:url(../images/topic1.png);
}
#page2 .topic1{
	width:6.4%;
	height:23.05%;
	top:21.48%;
	left:72.14%;
}
.topic2{
	width:6.67%;
	height:53.7%;
	top:0%;
	left:23.55%;
	background-image:url(../images/topic2.png);
}

.enter{
	width:6.1%;
	height:1.76%;
	top:27.13%;
	left:58.02%;
	background-image:url(../images/enter.png);
}
.enter a,#page2 a{
	width:100%;
	height:100%;
	display:block;
}
.logo{
	width:9.64%;
	height:4.9%;
	top:3.52%;
	left:20.78%;
	background-image:url(../images/logo.png);
}
.ding{
	width:14.375%;
	height:26.67%;
	top:50.65%;
	left:44.43%;
	background-image:url(../images/ding.png);
	background-size: 100% 100%;
}
.ren{
	width:3.125%;
	height:17.13%;
	top:57.59%;
	left:54.64%;
	background-image:url(../images/ren.png);
}


.text1{
	width:16.72%;
	height:6.85%;
	bottom:4.17%;
	left:62.45%;
	background-image:url(../images/text1.png);
}
#page1-1 .di{
	width:100%;
	height:14.44%;
	position:absolute;
	left:0;
	bottom:0;
	background:#230700;
	border-top:1px solid #d9a969;
}
.tit1{
	width:4.32%;
	height:30.65%;
	top:7.96%;
	left:63.9%;
	background-image:url(../images/tit1.png);
}
.tit2{
	width:3.7%;
	height:23.33%;
	top:7.4%;
	left:58.59%;
	background-image:url(../images/tit2.png);
}
.tit3{
	width:4.375%;
	height:34.63%;
	top:23.61%;
	left:52.08%;
	background-image:url(../images/tit3.png);
}
.tit4{
	width:3.75%;
	height:25%;
	top:44.17%;
	left:46.2%;
	background-image:url(../images/tit4.png);
}
.tit5{
	width:3.75%;
	height:25.83%;
	top:25.56%;
	left:40.36%;
	background-image:url(../images/tit5.png);
}
.tit6{
	width:3.7%;
	height:25%;
	top:7.78%;
	left:34.79%;
	background-image:url(../images/tit6.png);
}
.tit7{
	width:3.7%;
	height:29.91%;
	top:25.83%;
	left:29.06%;
	background-image:url(../images/tit7.png);
}



#page1.active #page1-1{
	display: block;
}
@-ms-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@-moz-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@-o-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@-webkit-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
#page1.active #wenwu-img{
	animation:'dh1' 1s ease-in-out 0.2s forwards;
	-ms-animation:dh1 1s ease-in-out 0.2s forwards;
	-moz-animation:dh1 1s ease-in-out 0.2s forwards;
	-o-animation:'dh1' 1s ease-in-out 0.2s forwards;
	-webkit-animation:'dh1' 1s ease-in-out 0.2s forwards;
}


@-ms-keyframes dh2{
	from{  opacity:1;}
	to{ opacity:0;}
}
@-moz-keyframes dh2{
	from{  opacity:1;}
	to{ opacity:0;}
}
@-o-keyframes dh2{
	from{  opacity:1;}
	to{ opacity:0;}
}
@-webkit-keyframes dh2{
	from{  opacity:1;}
	to{ opacity:0;}
}
@keyframes dh2{
	from{  opacity:1;}
	to{ opacity:0;}
}
#page1.active #container{
	animation:'dh2' 0.3s ease-in-out 0.2s forwards;
	-ms-animation:dh2 0.3s ease-in-out 0.2s forwards;
	-moz-animation:dh2 0.3s ease-in-out 0.2s forwards;
	-o-animation:'dh2' 0.3s ease-in-out 0.2s forwards;
	-webkit-animation:'dh2' 0.3s ease-in-out 0.2s forwards;
}
#page1.active #app{
	animation:'dh2' 2.4s ease 1.2s forwards;
	-ms-animation:dh2 2.4s ease 1.2s forwards;
	-moz-animation:dh2 2.4s ease 1.2s forwards;
	-o-animation:'dh2' 2.4s ease 1.2s forwards;
	-webkit-animation:'dh2'2.4s ease 1.2s forwards;
}



@-ms-keyframes dh3{
	from{ }
	to{ z-index:100;}
}
@-moz-keyframes dh3{
	from{ }
	to{ z-index:100;}
}
@-o-keyframes dh3{
	from{ }
	to{ z-index:100;}
}
@-webkit-keyframes dh3{
	from{ }
	to{ z-index:100;}
}
@keyframes dh3{
	from{ }
	to{ z-index:100;}
}
#page1.active #page1-1{
	animation:'dh3' 1s ease 2.6s forwards;
	-ms-animation:dh3 1s ease 2.6s forwards;
	-moz-animation:dh3 1s ease 2.6s forwards;
	-o-animation:'dh3' 1s ease 2.6s forwards;
	-webkit-animation:'dh3'1s ease 2.6s forwards;
}



@-ms-keyframes dh5{
	from{ opacity:0; margin-left:0.5em;}
	to{ opacity:1;  }
}
@-moz-keyframes dh5{
	from{ opacity:0; margin-left:0.5em;}
	to{ opacity:1;  }
}
@-o-keyframes dh5{
	from{ opacity:0; margin-left:0.5em;}
	to{ opacity:1;  }
}
@-webkit-keyframes dh5{
	from{ opacity:0; margin-left:0.5em;}
	to{ opacity:1;  }
}
@keyframes dh5{
	from{ opacity:0; margin-left:0.5em;}
	to{ opacity:1;  }
}
.tit1{
	animation:'dh5' 0.6s ease-in-out 0.2s forwards;
	-ms-animation:dh5 0.6s ease-in-out 0.2s forwards;
	-moz-animation:dh5 0.6s ease-in-out 0.2s forwards;
	-o-animation:'dh5' 0.6s ease-in-out 0.2s forwards;
	-webkit-animation:'dh5' 0.6s ease-in-out 0.2s forwards;
}
.tit2{
	animation:'dh5' 0.6s ease-in-out 0.8s forwards;
	-ms-animation:dh5 0.6s ease-in-out 0.8s forwards;
	-moz-animation:dh5 0.6s ease-in-out 0.8s forwards;
	-o-animation:'dh5' 0.6s ease-in-out 0.8s forwards;
	-webkit-animation:'dh5' 0.6s ease-in-out 0.8s forwards;
}
.tit3{
	animation:'dh5' 0.6s ease-in-out 1.4s forwards;
	-ms-animation:dh5 0.6s ease-in-out 1.4s forwards;
	-moz-animation:dh5 0.6s ease-in-out 1.4s forwards;
	-o-animation:'dh5' 0.6s ease-in-out 1.4s forwards;
	-webkit-animation:'dh5' 0.6s ease-in-out 1.4s forwards;
}
.tit4{
	animation:'dh5' 0.6s ease-in-out 2s forwards;
	-ms-animation:dh5 0.6s ease-in-out 2s forwards;
	-moz-animation:dh5 0.6s ease-in-out 2s forwards;
	-o-animation:'dh5' 0.6s ease-in-out 2s forwards;
	-webkit-animation:'dh5' 0.6s ease-in-out 2s forwards;
}
.tit5{
	animation:'dh5' 0.6s ease-in-out 2.6s forwards;
	-ms-animation:dh5 0.6s ease-in-out 2.6s forwards;
	-moz-animation:dh5 0.6s ease-in-out 2.6s forwards;
	-o-animation:'dh5' 0.6s ease-in-out 2.6s forwards;
	-webkit-animation:'dh5' 0.6s ease-in-out 2.6s forwards;
}
.tit6{
	animation:'dh5' 0.6s ease-in-out 3.2s forwards;
	-ms-animation:dh5 0.6s ease-in-out 3.2s forwards;
	-moz-animation:dh5 0.6s ease-in-out 3.2s forwards;
	-o-animation:'dh5' 0.6s ease-in-out 3.2s forwards;
	-webkit-animation:'dh5' 0.6s ease-in-out 3.2s forwards;
}
.tit7{
	animation:'dh5' 0.6s ease-in-out 3.8s forwards;
	-ms-animation:dh5 0.6s ease-in-out 3.8s forwards;
	-moz-animation:dh5 0.6s ease-in-out 3.8s forwards;
	-o-animation:'dh5' 0.6s ease-in-out 3.8s forwards;
	-webkit-animation:'dh5' 0.6s ease-in-out 3.8s forwards;
}










.sub-page {
    position: relative;
    height: 100%;
}
/* 竖屏Start */
@media only screen and (orientation: portrait) {
.sub-page{
	position: absolute;
	width: 100vh;
	height: 100vw;
	top: -100vw;
	transform: rotate(90deg);
	transform-origin: bottom left;
}
	
#page2 { background-image: url(../images/page2-1.jpg);}
#page2 .topic1 {
    width: 8.73%;
    height: 31.69%;
    top: 31.81%;
    left: 89.4%;
}
.tit1{
	width: 6.26%;
    height: 44.52%;
    top: 18.5%;
    left: 78.34%;
}
.tit2{
	width: 5.57%;
    height: 36%;
    top: 8.5%;
    left: 69.4%;
}
.tit3{
	width: 6.26%;
    height: 50.18%;
    top: 18.99%;
    left: 57.98%;
}
.tit4{
	width: 6.12%;
    height: 40.94%;
    top: 43.9%;
    left: 47.73%;
}
.tit5{
	width: 5.7%;
    height: 39.7%;
    top: 27.13%;
    left: 39.75%;
}
.tit6{
	width: 5.98%;
    height: 40.69%;
    top: 9.25%;
    left: 30.81%;
}
.tit7{
	width: 5.43%;
    height: 44.76%;
    top: 18.37%;
    left: 20.84%;
}


.enter {
    width: 14.06%;
    height: 4.63%;
    top: 25.13%;
    left: 58.02%;
}

	
}
/* 竖屏End */



@-ms-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@-moz-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@-o-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@-webkit-keyframes dh1{
	from{ }
	to{top: 41.76%;}
}
@keyframes dh6{
	from{opacity:0;}
	99%{opacity:0;}
	to{topacity:1;}
}
#page1.active .ding{
	animation:'dh6' 1.2s ease-in-out 0s forwards;
	-ms-animation:dh6 1.2s ease-in-out 0s forwards;
	-moz-animation:dh6 1.2s ease-in-out 0s forwards;
	-o-animation:'dh6' 1.2s ease-in-out 0s forwards;
	-webkit-animation:'dh6' 1.2s ease-in-out 0s forwards;

}




.load{
	width:100%;
	height: 100vh;
	position: fixed;
	z-index: 3000;
	background:url(../images/load.jpg) no-repeat center center;
	background-size:cover;
	display: none;

}
.load .load-tit{
	width: 61.92%;
    height: 36.4%;
    left: 19.19%;
    top: 16%;
    background-image: url(../images/load-tit.png);
}
.load .news{
	width:100%;
	position:absolute;
	top:59.26%;
	left:0;
}
.load .bar{
	width:48.6%;
	height:1.2em;
	border:1px solid #645f5f;
	border-radius:0.6em;
	position:absolute;
	left:25.7%;
}
.load .bar .sp1{
	display:block;
	height:1.2em;
	background:#dfab58;
	border-radius:0.6em;
}
.load .news .p2{ 
	font-size:1.5em;
	color:#dfab58;
	line-height:1.5em;
	text-align:center;
	position:absolute;
	left:0;
	top:1em;
	width:100%;
}
.load .enter{
	width: 28.41%;
    height: 4.93%;
    left: 35.83%;
    top: 72.13%;
    background-image: url(../images/load-enter.png);
	cursor:pointer;
	display: none;
}