/** 清除内外边距 **/
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin: 0;padding: 0;}
/** 设置默认字体 **/
body,button,input,select,textarea {font: 14px/1.5 'zdy', tahoma, arial, sans-serif;}
/** 重置列表元素 **/
ul,ol {list-style: none;}
/** 重置文本格式元素 **/
a {text-decoration: none;}
a:hover {text-decoration: none;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;}
address,cite,dfn,em,var {font-style: normal;}
/* 将斜体扶正 */
code,kbd,pre,samp {font-family: courier new, courier, monospace;}
/* 统一等宽字体 */
small {font-size: 12px;}
/* 小于 12px 的中文很难阅读，让 small 正常化 */
/** 重置列表元素 **/
ul,ol {list-style: none;}
/** 重置文本格式元素 **/
a {text-decoration: none;}
a:hover {text-decoration: none;}
/** 重置表单元素 **/
legend {
  color: #000;
}
/* for ie6 */
fieldset,img {border: 0;}
/* img 搭车：让链接里的 img 无边框 */
button,input,select,textarea {font-size: 100%;}
/* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table {border-collapse: collapse;border-spacing: 0;}
.fl {float: left;}
.fr {float: right;}
.cl {clear: both;}
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix {*zoom:1;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.center_v {
  /* Center vertically */
  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;
}
.single_text {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

@keyframes animation-rotate {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
@-moz-keyframes animation-rotate {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
@-webkit-keyframes animation-rotate {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}
@-o-keyframes animation-rotate {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(360deg);-webkit-transform: rotate(360deg);}
}

@keyframes animation-rotate-un {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(-360deg);-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes animation-rotate-un {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(-360deg);-webkit-transform: rotate(-360deg);}
}
@-webkit-keyframes animation-rotate-un {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(-360deg);-webkit-transform: rotate(-360deg);}
}
@-o-keyframes animation-rotate-un {
  from {transform: rotate(0deg);-webkit-transform: rotate(0deg);}
  to {transform: rotate(-360deg);-webkit-transform: rotate(-360deg);}
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {background-color: #fff;}
img {width: 100%;}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page {width: 100%;height: 100%;position: relative;}

.fn-audio {position: fixed; z-index: 100;left: 2%;top: 1%;}
.fn-audio .btn {border: none;}
.fn-audio .btn_audio span {display: inline-block;width: 30px;height: 30px;}
.fn-audio .btn_audio .audio_open {
  animation: animation-rotate-un 2s linear infinite normal forwards;
  -webkit-animation: animation-rotate-un 2s linear infinite normal forwards;
}
.fn-audio .btn_audio .audio_close {display: none;}

#main {width: 100%;height: 100%;overflow: hidden;background-color: #D8EDC8;}
#main .page {width: 100%;height: 100%;overflow: hidden;}
.delay1{
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}
.delay2{
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}

@keyframes tipmovo {
  0%,100% {transform: translateY(0px);-webkit-transform: translateY(0px);}
  50% {transform: translateY(5px);-webkit-transform: translateY(5px);}
}
@-webkit-keyframes tipmovo {
  0%,100% {transform: translateY(0px);-webkit-transform: translateY(0px);}
  50% {transform: translateY(5px);-webkit-transform: translateY(5px);}
}

.tipmovo1{
	animation: tipmovo 3s linear 1s infinite normal forwards;
  -webkit-animation: tipmovo 3s linear 1s infinite normal forwards;
}
.tipmovo2{
	animation: tipmovo 3.5s linear 1.5s infinite normal forwards;
  -webkit-animation: tipmovo 3.5s linear 1.5s infinite normal forwards;
}
.tipmovo3{
	animation: tipmovo 4s linear 2s infinite normal forwards;
  -webkit-animation: tipmovo 4s linear 2s infinite normal forwards;
}

.loading {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: rgba(0,0,0,.8);
}

.loading .content {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0%;
	left: 0;
}

.loading .loading_text{position: absolute;left: 20%;bottom: 15%;width: 60%;height: 20px;text-align: center;}
.loading_text .line{width: 0; height: 5px;background-color: #e3d1a2;border-radius: 5px;margin-bottom: 10px;}
.loading_text .text{text-align: center;font-size: 14px;color: #e3d1a2;}
.loading_text .texts{width: 100%;height: 30px; text-align: center;color: #e3d1a2; position: relative;}
.loading_text .texts p {position: absolute;left: 0;top: 0;width: 100%;text-align: center; opacity: 0;font-size: 16px;}

.page1 {font-size: 0; background: url(../images/p1/p1_bg.jpg) no-repeat 0 0;background-size: 100% 100%;}
.p1_logo{position: absolute;left: 5%;top: 3%;width: 90%;max-width: 697px;}
.p1_fw1{position: absolute;left: 0%;bottom: 0%;width: 100%;max-width: 750px;z-index: 1;}
.p1_fw2{position: absolute;left: 0%;bottom: 0%;width: 100%;max-width: 750px;z-index: 4;}
.p1_re1{position: absolute;left: 0%;top: 14%;width: 60%;max-width: 513px;z-index: 2;}
.p1_re2{position: absolute;left: 45%;top: 45%;width: 44%;max-width: 333px;z-index: 5;}
.p1_re1 img,.p1_re2 img{opacity: 0;}
.p1_re1.on{
    background: url("../images/p1/re1on.png") ;
    background-size: cover;
    animation: play 1s 0.5s steps(9, start) 1;
    -webkit-animation: play 1s 0.5s steps(9, start) 1;
}
.p1_re2.on{
    background: url("../images/p1/re2on.png") ;
    background-size: cover;
    animation: play 1s steps(9, start) 1;
    -webkit-animation: play 1s steps(9, start) 1;
}
@keyframes play {
    from{background-position-x: 0%;}
    to{background-position-x: 100%;}
}
@-webkit-keyframes play {
    from{background-position-x: 0%;}
    to{background-position-x: 100%;}
}
.bookbox{position: absolute;left: 45%;top: 53%;width: 42%;max-width: 243px;z-index: 10;display: none;}
.bookbox .p1_g1{position: absolute;left: 0%;top: -13%;width: 100%;max-width: 279px;}
.bookbox .p1_g2{position: absolute;left: 0%;top: -13%;width: 100%;max-width: 279px;}
.bookbox .p1_book{position: absolute;left: 23%;top: 23%;width: 50%;max-width: 80px;}
.bookbox .p1_shou{position: absolute;left: 33%;top: 56%;width: 24%;max-width: 80px;}

.bigbookbox{position: absolute;left: 0%;top: 0%;width: 100%;height: 100%;background: rgba(0,0,0,.5);z-index: 20;display: none;}
.bigbookbox .P2_shu{position: absolute;left: 0%;top: 5%;width: 100%;}
.bigbookbox .btns{position: absolute;left: 40%;top: 60%;width: 20%;}

.door{position: absolute;left: 0%;top: 0%;width: 100%;height: 100%;overflow: hidden;z-index: 200;display: none;}
.door .doorleft{position: absolute;left: 0%;top: 0%;width: 80%;height: 100%;}
.door .doorright{position: absolute;right: 0%;top: 0%;width: 80%;height: 100%;transform: rotateY(180deg);-webkit-transform: rotateY(180deg);}
.door img{position: absolute;left: -100%;top: 0%;width: 60%;}
.door .dcloud1{top: -2%;width: 100%;max-width: 488px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
.door .dcloud2{top: 0%;width: 100%;max-width: 404px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
.door .dcloud3{top: 0%;width: 100%;max-width: 415px;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
.door .dcloud4{top: 11%;width: 100%;max-width: 387px;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
.door .dcloud5{top: 9%;width: 100%;max-width: 351px;-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
.door .dcloud6{top: 21%;width: 100%;max-width: 286px;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
.door .dcloud7{top: 40%;width: 100%;max-width: 272px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
.door .dcloud8{top: 54%;width: 100%;max-width: 292px;-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
.door .dcloud9{top: 57%;width: 100%;max-width: 126px;-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
.door .dcloud10{top: 66%;width: 100%;max-width: 248px;-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}

.doormovo{
	animation: doormovo 2s linear 1 normal forwards;
  	-webkit-animation: doormovo 2s linear 1 normal forwards;
}
@keyframes doormovo {
  0%,100%{left: -100%;}
  40% {left: 0%;}
  70% {left: 0%;}
}
@-webkit-keyframes doormovo {
  0%,100%{left: -100%;}
  40% {left: 0%;}
  70% {left: 0%;}
}




.page2 {/*display: none;*/}
.page2 .content {width: auto;height: 100%;overflow: scroll;-webkit-overflow-scrolling: touch; font-size: 0; position: relative;}
.page2 .content .mapbox {width: 447%;height: 317%;position: relative;}
.page2 .content .mapimg {width: 100%; height: 100%;}
.page2 .content .tipbox {position: absolute;width: 35px;max-width: 50px;}


.page2 .content .mark1 { left: 7%;top: 38.6%;}
.page2 .content .mark2 { left: 22%;top: 40%;}
.page2 .content .mark3 {left: 34.7%;top: 39.3%;}
.page2 .content .mark4 {left: 32%;top: 25%;}
.page2 .content .mark5 {left: 45.4%;top: 30%;}
.page2 .content .mark6 {left: 61%;top: 28.1%;}
.page2 .content .mark7 {left: 65.3%;top: 29.5%;}
.page2 .content .mark8 {left: 63%;top: 41%;}
.page2 .content .mark9 {left: 80%;top: 47%;}
.page2 .content .mark10 {left: 54%;top: 46%;}
.page2 .content .mark11 {left: 54%;top: 52%;}
.page2 .content .mark12 {left: 45%;top: 52%;}
.page2 .content .mark13 {left: 22%;top: 55%;}
.page2 .content .mark14 {left: 49%;top: 60%;}
.page2 .content .mark15 {left: 76.6%;top: 66.2%;}
.page2 .content .mark16 {left: 52.5%;top: 67.2%;}
.page2 .content .mark17 {left: 22%;top: 68%;}
.page2 .content .mark18 {left: 10%;top: 83%;}
.page2 .content .mark19 {left: 30.5%;top: 75.7%;}
.page2 .content .mark20 {left: 61%;top: 76%;}
.page2 .content .mark21 {left: 72.9%;top: 83.1%;}
.page2 .content .mark22 {left: 45.6%;top: 85.3%;}


@keyframes cloudmovo {
  0%,100% {transform: translateX(0px);-webkit-transform: translateX(0px);}
  50% {transform: translateX(100px);-webkit-transform: translateX(100px);}
}
@-webkit-keyframes cloudmovo {
  0%,100% {transform: translateX(0px);-webkit-transform: translateX(0px);}
  50% {transform: translateX(100px);-webkit-transform: translateX(100px);}
}
.cloudmovo1{
	animation: cloudmovo 15s linear 1s infinite normal forwards;
  -webkit-animation: cloudmovo 15s linear 1s infinite normal forwards;
}
.cloudmovo2{
	animation: cloudmovo 18s linear 1s infinite normal forwards;
  -webkit-animation: cloudmovo 18s linear 1s infinite normal forwards;
}
.cloudmovo3{
	animation: cloudmovo 20s linear 1s infinite normal forwards;
  -webkit-animation: cloudmovo 20s linear 1s infinite normal forwards;
}
.page2 .content .cloud {position: absolute;opacity: 1;}
.page2 .content .cloud1 {width: 34%;max-width: 564px;left: 3.8%;top: 24.3%;}
.page2 .content .cloud2 {width: 34%;max-width: 564px;left: 25.6%;top: 40%;}
.page2 .content .cloud3 {width: 34%;max-width: 564px;left: 31%;top: 70.8%;}
.page2 .content .cloud4 {width: 34%;max-width: 564px;left: 55%;top: 53.6%;}
.page2 .content .cloud5 {width: 34%;max-width: 564px; left: 67%;top: 29.1%;}
.page2 .content .cloud6 {width: 34%;max-width: 564px;left: 65%;top: 68.1%;}

.page2 .content .sharebox {position: absolute;right: 3%;bottom: 3.1%;background-color: #1c6a8b;border: 1px solid #cdd9c7; padding: 5px; border-radius: 10px;z-index: 20;}
.page2 .content .sharebox p {font-size: 14px; display: block;color: #fff;}


.layerbox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.2);
  z-index: 999;
  display: none;
}
.layercont {width: 94%;height: 80%;position: absolute;left: 3%;top:10%;color: #FFFFFF;font-weight: normal;}
.closebtn {position: absolute;right: 6%;top: 3%;width: 40px;cursor: pointer;}
.juanzhou{position: relative;z-index: 2;}
.juanxia{position: relative;z-index: 1;top: -10%;}
.drop{position: absolute;left: 5%;top: 14%;width: 90%;height: 85%;overflow: scroll;z-index: 5;color: #1d3849;display: none;}
.drop1{/* display: none; */}
.drop .title{font-size: 24px;padding: 10px 0px;margin-bottom: 10px;text-align: center;background: url(../images/P5_biaoti.png) no-repeat center center;background-size: auto 100%;}
.drop h2{font-size: 14px;padding: 2px 5px;margin-bottom: 10px;text-align: center;}
.drop .btbox{padding-left: 13px;margin-bottom: 10px;}
.drop .btbox h3{width: 72%;position: relative;margin: 10px 0;color: #fff;}
.drop .btbox h3 span{position:absolute;left: 27%;top: 45%;font-size: 14px;}
.drop .btbox h3.bqjin span{top: 49%;}
.drop .btbox p{font-size: 14px;}

.music{position:absolute;left:0.3rem;top:0.3rem;width:40px;height:40px;background:url(../images/music.png) no-repeat center left;background-size:cover;z-index: 9999;display:none}
.music.pause{background:url(../images/music_pause.png) no-repeat;background-size:cover;}
.share {
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    text-align: right;
    z-index: 1100;
}
.share img {
    width: 70%;
}



@media all and (orientation : landscape) { /*　　这是匹配横屏的状态，横屏时的css代码　　*/
    
}
@media all and (orientation : portrait){ /*　　这是匹配竖屏的状态，竖屏时的css代码　　*/
    
}