@charset "utf-8";
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
.page2{ background:url(sec-bg1.jpg) center top no-repeat; background-size: cover;}
.page1{ background:url(sz-bg1.jpg) center top no-repeat; background-size: cover;}
.page{ display:flex; justify-content:center; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page.hide{ display:none;}
.page p{ font-size:15px; color:#fff; line-height:130%;}

.jianshao {width:86%; margin:0 auto; display: block !important; height:80%; overflow:scroll;}
.jianshao p{font-size:23px; color:#fff; margin:15px 0; line-height:150%;}

.neirong {overflow:scroll; width:86%; margin:0 auto; display: block !important;}
.neirong p{font-size:24px; color:#000; margin:15px 0; line-height:150%;}

/* 广东地图 */
.gdmap { background:url(gdmap.png) center top; background-size:cover; height:500px; width:100% !important; margin-left:0 !important; top:35%;}
.gdmap .city { width:60px; font-size:26px; color:#fff; line-height:32px; text-align:center;}
.gdmap .city a{font-size:26px; color:#fff; line-height:32px; text-decoration:none;}
.animate1 { background:#c58d05; border-radius:8px; animation-name:heartBeat; animation-duration:4s; animation-iteration-count:infinite; animation-direction:alternate;}
.animate2 { background:#c58d05; border-radius:8px; animation-name:heartBeat; animation-delay:2s; animation-duration:4s; animation-iteration-count:infinite; animation-direction:alternate;}
.gdmap dd { background:url(city-x.png) center -10px no-repeat; width:100%; height:30px; line-height:30px;}
.gdmap dt {height:40px; line-height:40px; text-align:center; animation-name:zoomIn; animation-duration:2s; animation-iteration-count:infinite; animation-direction:alternate;}
.gdmap .zq { overflow:hidden; position:absolute; bottom:70%; left:3%;}
.gdmap .jm { overflow:hidden; position:absolute; bottom:55%; left:16%;}
.gdmap .fs { overflow:hidden; position:absolute; bottom:70%; left:33%;}
.gdmap .gz { overflow:hidden; position:absolute; bottom:80%; left:45%;}
.gdmap .dg { overflow:hidden; position:absolute; bottom:68%; left:55%;}
.gdmap .hz { overflow:hidden; position:absolute; bottom:80%; left:83%;}
.gdmap .zs { overflow:hidden; position:absolute; bottom:50%; left:40%;}
.gdmap .sz { overflow:hidden; position:absolute; bottom:60%; left:65%;}
.gdmap .xg { overflow:hidden; position:absolute; bottom:50%; left:73%;}
.gdmap .zh { overflow:hidden; position:absolute; bottom:38%; left:45%;}
.gdmap .am { overflow:hidden; position:absolute; bottom:30%; left:50%;}
.gdmap .sg { overflow:hidden; position:absolute; bottom:99%; left:50%;}

/* 弹窗 */
.tan { display:flex; justify-content:space-around; font-size:26px; color:#2923a0; text-align:center; line-height:150%; padding:20px 30px 0;}
.tan img{ width:80%;}

/* music */
@-webkit-keyframes reverseRotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(-360deg);}
}
@-webkit-keyframes rotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(360deg);}
}
#musicControl { position:fixed;right:20px;top:0;margin-top:0;display:inline-block;z-index:99999999}
#musicControl a { display:inline-block;width:40px;height:40px;overflow:hidden;}
#musicControl a audio{width:100%;height:56px;}
#musicControl a.stop { background-position:left bottom; background:url('stop.png') no-repeat;background-size:100%;}
#musicControl a.on { background-position:0px 1px;-webkit-animation: reverseRotataZ 1.2s linear infinite; background:url('play.png') no-repeat;background-size:100%;}
#music_play_filter{width:100%;height:100%;overflow:hidden;position:fixed;top:0;left:0;z-index:99999998;}
 
/*==================================*/
 
.page.inTop{
            -webkit-animation:ShowTop .5s ease-out both;
                    animation:ShowTop .5s ease-out both;
}
.page.outTop{
            -webkit-animation:HideTop .5s ease-out both;
                    animation:HideTop .5s ease-out both;
}
.page.inDown{
            -webkit-animation:ShowDown .5s ease-out both;
                    animation:ShowDown .5s ease-out both;
}
.page.outDown{
            -webkit-animation:HideDown .5s ease-out both;
                    animation:HideDown .5s ease-out both;
}
@-webkit-keyframes ShowTop{
    0%{ -webkit-transform:translateY(100%);}
    100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowTop{
    0%{ transform:translateY(100%);}
    100%{ transform:translateY(0);}
}
@-webkit-keyframes HideTop{
    0%{ -webkit-transform:translateY(0);}
    100%{ -webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
    0%{ transform:translateY(0);}
    100%{ transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
    0%{ -webkit-transform:translateY(-100%);}
    100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowDown{
    0%{ transform:translateY(-100%);}
    100%{ transform:translateY(0);}
}
@-webkit-keyframes HideDown{
    0%{ -webkit-transform:translateY(0);}
    100%{ -webkit-transform:translateY(100%);}
}
@keyframes HideDown{
    0%{ transform:translateY(0);}
    100%{ transform:translateY(100%);}
}
 
/*==================================*/
 
.arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#fff; position:absolute; left:285px; bottom:10px;
            -webkit-animation:arrow 1.2s .5s ease-in-out infinite;
                    animation:arrow 1.2s .5s ease-in-out infinite;
}
@-webkit-keyframes arrow{
    0%{ -webkit-transform:translateY(0); opacity:1;}
    100%{ -webkit-transform:translateY(-50%); opacity:0}
}
@keyframes arrow{
    0%{ transform:translateY(0); opacity:1;}
    100%{ transform:translateY(-50%); opacity:0}
}
 
 
/*==================================*/
 
.page > div > div:nth-child(1){ display:flex; justify-content:center; margin-top:10%;
    -webkit-animation:fadeRightTan .8s .2s ease-in-out both;
            animation:fadeRightTan .8s .2s ease-in-out both;
}
.page > div > div:nth-child(1) img{ width:90%;}
.page > div > div:nth-child(2){display:flex; justify-content:center; margin-top:3%;
    -webkit-animation:fadeRightTan .8s .7s ease-in-out both;
            animation:fadeRightTan .8s .7s ease-in-out both;
}
.page > div > div:nth-child(2) img{ width:90%;}
.page > div > div:nth-child(3){ margin-left:5%; margin-top:8%;
    -webkit-animation:fadeRightTan .8s 1.2s ease-in-out both;
            animation:fadeRightTan .8s 1.2s ease-in-out both;
}
.page > div > div:nth-child(4){ position:absolute; bottom:5%; z-index:999; width:60%; margin-left:20%;
    -webkit-animation:fadeInUp 1.8s .7s ease-in-out both;
            animation:fadeInUp 1.8s .7s ease-in-out both;
}
.page > div > div:nth-child(5){ text-align:right;
    -webkit-animation:fadeInTopRight 2.8s 2.2s ease-in-out both;
            animation:fadeInTopRight 2.8s 2.2s ease-in-out both;
}
.page > div > div:nth-child(6){
    -webkit-animation:fadeRightTan .8s 2.7s ease-in-out both;
            animation:fadeRightTan .8s 2.7s ease-in-out both;
}
.page > div > div:nth-child(7){
    -webkit-animation:fadeRightTan .8s 3.2s ease-in-out both;
            animation:fadeRightTan .8s 3.2s ease-in-out both;
}
.page > div > div:nth-child(8){
    -webkit-animation:fadeRightTan .8s 4.7s ease-in-out both;
            animation:fadeRightTan .8s 4.7s ease-in-out both;
}
.page > div > div:nth-child(9){
    -webkit-animation:fadeRightTan .8s 5.2s ease-in-out both;
            animation:fadeRightTan .8s 5.2s ease-in-out both;
}
.page > div > div:nth-child(10){
    -webkit-animation:fadeRightTan .8s 5.7s ease-in-out both;
            animation:fadeRightTan .8s 5.7s ease-in-out both;
}
@-webkit-keyframes fadeRightTan{
    0%{ -webkit-transform:translateX(100%); opacity:0;}
    70%{ -webkit-transform:translateX(-5%); opacity:1;}
    80%{ -webkit-transform:translateX(2%); opacity:1;}
    90%{ -webkit-transform:translateX(-2%); opacity:1;}
    100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeRightTan{
    0%{ transform:translateX(100%); opacity:0;}
    70%{ transform:translateX(-5%); opacity:1;}
    80%{ transform:translateX(2%); opacity:1;}
    90%{ transform:translateX(-2%); opacity:1;}
    100%{ transform:translateX(0); opacity:1;}
}

@-webkit-keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
@keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0)
}
to {
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
.animate__fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp
}
@-webkit-keyframes fadeInTopRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%, -100%, 0);
transform:translate3d(100%, -100%, 0)
}
to {
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
@keyframes fadeInTopRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%, -100%, 0);
transform:translate3d(100%, -100%, 0)
}
to {
opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)
}
}
.animate__fadeInTopRight {
	-webkit-animation-name: fadeInTopRight;
	animation-name: fadeInTopRight
}

@-webkit-keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50% {
opacity:1
}
}
@keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(.3, .3, .3);
transform:scale3d(.3, .3, .3)
}
50% {
opacity:1
}
}
.animate__zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn
}

@-webkit-keyframes heartBeat {
0% {
-webkit-transform:scale(1);
transform:scale(1)
}
14% {
-webkit-transform:scale(1.3);
transform:scale(1.3)
}
28% {
-webkit-transform:scale(1);
transform:scale(1)
}
42% {
-webkit-transform:scale(1.3);
transform:scale(1.3)
}
70% {
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes heartBeat {
0% {
-webkit-transform:scale(.7);
transform:scale(.7)
}
14% {
-webkit-transform:scale(1);
transform:scale(1)
}
28% {
-webkit-transform:scale(.7);
transform:scale(.7)
}
42% {
-webkit-transform:scale(1);
transform:scale(1)
}
70% {
-webkit-transform:scale(.7);
transform:scale(.7)
}
}
.animate__heartBeat {
	-webkit-animation-name: heartBeat;
	animation-name: heartBeat;
	-webkit-animation-duration: 1.3s;
	animation-duration: 1.3s;
-webkit-animation-duration:calc(var(--animate-duration)*1);
animation-duration:calc(var(--animate-duration)*1);
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out
}