@charset "utf-8";

div,table,html,body,form,ul,ol,li,dl,dt,img,dd,tr,span,input,select,img,p{margin:0 ;padding:0;}
h1,h2,h3,h4,h5,h6{padding:0;margin:0;}
body{font-size:12px;font-family:"微软雅黑"; color:#ffffff; text-align:left; width: 800px; background-color:#ffffff; margin: 0 auto;}
a{text-decoration:none;color:#4f4f4f;}
a:hover{text-decoration:none;color:#4f4f4f;}
ul li{list-style:none;}
img{display:block;}
body{ max-height:999999px; max-width: 1920px;}
.cl{clear: both; height: 0px; overflow: hidden;}
.clearflx:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.none{display: none;}

img{
	/* 元素不能成为鼠标事件的target */
	pointer-events:none;
	-webkit-pointer-events:none;
	-ms-pointer-events:none;
	-moz-pointer-events:none;
}
*:not(input) {
    -webkit-touch-callout:none;/*系统默认菜单被禁用*/
    -webkit-user-select:none;/*webkit浏览器*/
    -khtml-user-select:none;/*早起浏览器*/
    -moz-user-select:none;/*火狐浏览器*/
    -ms-user-select:none;/*IE浏览器*/
    user-select:none;/*用户是否能够选中文本*/
}

/* bg */
.bg, .bg2{position: relative; width: 800px; height: 1371px; background: url(bg1.jpg) no-repeat center center/100% 100%; overflow: hidden;}
.bg2{background: url(bg2.jpg) no-repeat center center/100% 100%;}
.flowers_rt{position: absolute; right: -122px; top: 1097px;}
.flowers_lc{position: absolute; left: -84px; top: 807px;}
.flowers_lc img{width: 100%; height: 100%; transform: rotateY(180deg);}
.bird1{position: absolute; left: 85px; top: 139px;}
.bird2{position: absolute; left: 109px; top: 170px;}
.yep{position: absolute; left: 0px; top: -6px; width: 793px; height: 459px;}

.logo{position: absolute; left: 48px; top: 62px;}


.swallowFly1 {
    width: 30px; height: 15%; left: -70px; top: 0; position: absolute; transform-origin: bottom center;
}

.swallowFly1:after {
    width: 55px;
    height: 62px;
    content: "";
    background-image: url("icon_bird2.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.swallowFly2 {
    width: 30px; height: 15%; left: -70px; top: 0; position: absolute; transform-origin: top center;
}

.swallowFly2::before {
    width: 46px;
    height: 25px;
    content: "";
    background-image: url("icon_bird1.png");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* 音频设置 */
.audioBox{position: absolute; right: 30px; top: 30px; width: 86px; height: 86px;  z-index : 101;}
.play_on{background: url("icon_music_play.png") no-repeat; width: 86px; height: 86px; display: none;}
.play_off{background: url("icon_music_pause.png") no-repeat; width: 86px; height: 86px; display: none;}
.audio_preloader{display: none;}

/* 浮动层 */
.share_box{width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 102; display: none;}
.share_bg, .code{width: 100%; height: 100%; background: rgba(25, 28, 34, 0.58); position: absolute; left: 0px; top: 0px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.share_png{background: url("share.png") no-repeat right 10px; width: 100%; height: 70px; background-size: auto 70%; position: absolute; left: 0px; top: 0px; z-index: 100;}
/* .share_poster{position: absolute; left: 105px; top: 243px; width: 546px; height: 836px;}
.share_poster img{width: 100%; height: 100%;} */

.share_poster{width: 600px; height: 1067.2px; position: absolute; left: 50%; top: 120px; margin-left: -300px; z-index: 99;}
.share_poster img, .code_wmf img, .code_xfj img{width: 100%; height: 100%;
    pointer-events:auto;
    -webkit-pointer-events:auto;
	-ms-pointer-events:auto;
	-moz-pointer-events:auto;
}
.share_tips{background: url("share_tips.png") no-repeat center center;width: 704px;height: 41px;position: absolute;left: 50%;margin-left: -352px;top: 1250px;z-index: 100;}


/* p0 加载页 */
.loading {  width: 100%; height: 100%; overflow: hidden; position: relative; z-index: 10;}
.progress_bg{ width: 630px; height: 15px; position: absolute; top: 575px; left: 85px; }
.progress_box{width: 100%; height: 10px; border-radius: 20px; position: absolute; overflow: hidden; left: 0; bottom: 0;
    background-color: #FFFFFF; border: 5px solid #489f85;}
.progress{width: 0px; height: 100%; border-radius: 9px; background: linear-gradient(to right, #2a8174, #54d095); overflow: hidden;}
.page00_tips{position: absolute;left: 155px;top: 122px;z-index: 5;display: none;}
.loading_gif{position: absolute; left: 70px; top: 480px; width: 147px; height: 142px;}
.loading_gif img {width: 100%;}

/* p1 首页 */
.page01 .title, .page03 .title{position: absolute; left: 25px; top: 145px;}
.page01 .btn_start{position: absolute; left: 243px; top: 774px; cursor: pointer;}
.from{position: absolute; left: 50px; top: 655px;}


/* p2 登录页 */
.page02{position: relative; width: 100%; height: 100%; overflow: hidden;}
.page02 .frame{position: absolute;left: 50%;margin-left: -260px;top: 28.5%;width: 520px;height: 600px;border-radius: 20px;background-color: transparent;display: flex;flex-direction: column;align-items: center;}
.page02 .btn_login{cursor: pointer;}

.cc{width: 100%; margin-bottom: 50px;}
.ly_ifs{float: left;  font-family:"微软雅黑", "黑体"; font-size: 35px; font-weight: 600; line-height: 49px; color:#366860;}
.ly_sel select, .ly_ipt input{float:left; font-weight: 500; width:144px; height:52px; border:none; background-color: transparent; border-bottom:4px solid #366860; font-family:"微软雅黑", "黑体"; font-size:35px; color:#366860; line-height:45px; padding:0 44px; box-sizing: border-box; text-align: left;} 
#sid1, #sid2, #sid3{width: 140px; border: 4px solid #366860; padding: 0; text-align: center; box-sizing: border-box;}
#sid2{width: 215px; }
#sid1, #sid2{padding-right: 20px;}

.ly_ipt input{width: 320px;}
.ly_txa textarea{float:left; width:250px; height:274px; background-color: transparent; border:1px solid #366860;  padding:15px 15px 15px 20px;box-sizing: border-box; font-family:"微软雅黑", "黑体"; font-size:35px; color:#366860; line-height:50px; text-align: left;}
 /* 下拉框选中样式 */
 select{ appearance: none; /* 隐藏默认箭头 */
    background-image: url('icon_arrow.png'); /* SVG图标数据 */
    background-repeat: no-repeat;
    background-position: calc(100% - 5px) center; /* 根据需要调整位置 */
    background-size: 20px;
    padding-right: 40px; /* 根据图标大小调整 */} 
 select:focus {border: none; outline: none; box-shadow: none;} 
input:focus{outline: none; box-shadow: none;}

/* p3 选择页 */
.page03 .title{position: absolute; left: 92px; top: 199px; width: 576px; height: 371px;}
.page03 .title img{width: 100%; height: 100%;}
.page03 .btn_goLongMarch{position: absolute; left: 103px; top: 559px; cursor: pointer;}
.page03 .btn_goRemember{position: absolute; left: 56px; top: 780px; cursor: pointer;}
.page03 .btn_goMemorial{position: absolute; left: 419px; top: 780px; cursor: pointer;}

/* p4 选择纪念设施版块 */

/* p4-1 地图 多边形锚点 */
.map{position: relative; left: 15px; top: 226px; background: url("map.png") no-repeat center center/100% 100%; width: 747px; height: 857px; }
/* .map svg path:hover{cursor: pointer; fill: #366860;} */
svg{pointer-events: none;}
path.clickable-area {
    cursor: pointer;
    pointer-events: auto; /* 确保可点击 */
    fill:transparent;/* 透明才可点击 */
    position: relative;
      z-index: 2; /* 提升层级 */
  }
  /* 半透明选中的颜色红色 */
.clickable-area:hover{fill: rgba(255, 4, 4, 0.2);}
.page04_1 .btn_back{cursor: pointer;width: 277px;height: 60px;position: absolute;left: 399px;top: 830px;box-sizing: border-box;}

/* p4-2 设施列表 */
.page04_2{position: relative; z-index: 10;}
.facility{ padding-left:135px; padding-top: 225px; width: 530px;}
.facility_name{ height: 93px; font-family: '微软雅黑', '宋体'; font-size: 66px; font-weight: bold; color: #FFFFFF; background: linear-gradient(to right, #4f94a2 50%, transparent 100%); text-align: left; padding-left: 30px; box-sizing: border-box;}
.facility_list{width: 100%; display: flex; flex-direction: column; background-color:rgba(236, 248, 248, 0.6); padding: 0 20px 60px; margin-bottom: 60px; box-sizing: border-box;}
.facility_list li{width: 100%; height: 60px; font-size: 30px; line-height: 60px; color: #4f94a2; text-align: center; border-bottom: 2px dashed #b2d3d8; cursor: pointer;}
.facility_list li:last-child{border-bottom: none;}
.page04_2 .btn_back{cursor: pointer;width: 342px; height: 60px; margin:0 auto 60px; box-sizing: border-box;}
/* p4-3 设施详情 */
.page04_3{position: relative; z-index: 10;}
.facility_detail{background: url(jng_content_bg.png) no-repeat center center/100% 100%;width: 793px;height: 1102px;position: absolute;left: 50%;top: 118px;margin-left: -392.5px;box-sizing: border-box;}
.facility_detail .pic{width: 335px;height: 335px;border: 5px solid #7fb6a1;position: absolute;left: 230px;top: 233px;box-sizing: border-box;overflow: hidden;}
.facility_detail .pic img{width: 100%; height: 100%;}
.facility_detail .title{width: 500px;min-height: 50px;position: absolute;left: 140px;top: 74px;background: url() no-repeat center center/100% 100%;font-size: 30px;line-height: 30px;color: #293b34;text-align: center;box-sizing: border-box;display: flex;align-items: center;justify-content: center;padding: 5px 55px;}
.facility_detail .content{width: 621px;height: 380px;background: url(jng_content_frame.png) no-repeat center center/100% 100%;border-radius: 26px;position: absolute;left: 90px;top: 590px;box-sizing: border-box;padding: 55px 42px;}
.facility_detail .content p{height: 265px;font-size: 30px;line-height: 45px;color:#3d494c;text-align: justify;text-indent: 2em;padding-right: 15px;overflow-y: auto;}
.facility_detail .content p::-webkit-scrollbar{width: 10px;background-color: #cfcfd1;border-radius: 25px;height: 205px;}
.facility_detail .content p::-webkit-scrollbar-thumb{background-color: #a4c5a2;border-radius: 25px;}
.facility_detail .btn_goFlowers{cursor: pointer;width: 277px;height: 60px;position: absolute;left: 54px;top: 975px;box-sizing: border-box;}
.facility_detail .btn_backMap{cursor: pointer;width: 277px;height: 60px;position: absolute;left: 407px;top: 1014px;box-sizing: border-box;}
/* p5 选择缅怀英烈版块 */
.oya{overflow-y: auto; }
.bg3{
    position: relative;
    width: 800px;
    height: auto;
    background: url(bg3_1.jpg) no-repeat center top/100% 2000px,
    url(bg3_2.jpg) no-repeat center 2000px/100% 1805px,
    url(bg3_3.jpg) no-repeat center bottom/100% 2399px;
    background-color: #acd2e6;
    }

  /* p5-1 英烈列表 */
.page05_1 .flowers_rt{position: absolute; right: -320px; top: -334px;}
.page05_1 .tips{ padding-left: 56px; padding-top: 116px; font-size: 35px; line-height: 50px; color:#5b5b5b;}
.page05_1 .btn_allSelect{cursor: pointer; padding-left: 56px; padding-top: 16px;}
.page05_1 ul{display: flex;flex-wrap: wrap;justify-content: space-evenly;gap: 20px;padding-top: 70px;padding-bottom: 350px;}
.page05_1 ul li{ width: 290px; height: 286px; position: relative;cursor: pointer;}
.page05_1 ul li img{width: 100%; height: 100%;}
.page05_1 ul li .check{width:51px;height:50px; background:url(icon_unselect.png) no-repeat center center/100% 100%; background-color:transparent;cursor:pointer; position: absolute; right: 5px; top: 5px;}
.page05_1 ul li .check.on{background:url(icon_select.png) no-repeat center center/100% 100%; background-color:transparent;}
.btn_go5_2{cursor: pointer; position: absolute; left: 50px; bottom: 115px;}
.page05_1 .btn_goMemorial{cursor: pointer; position: absolute; right: 50px; bottom: 115px;}

  /* p5-2 英烈详情 */
.page05_2 .btn_backList{ cursor: pointer; position: absolute; left: 50px; top: 40px;}
.page05_2 .frame{background: url(frame_content.png) no-repeat center center/100% 100%;position: absolute;left: 50%;margin-left: -358px;top: 218px;width: 716px;height: 862px;display: flex;flex-direction: column;align-items: center;padding: 0 40px;box-sizing: border-box;}
.page05_2 .frame_tx{margin-top: -120px;/* margin-bottom: 50px; */}
.page05_2 .frame_content{height: 550px;/* padding: 0 20px; */box-sizing: border-box;overflow-y: auto;}
.page05_2 .frame_content p{ font-size: 35px; line-height: 50px; color:#366860; text-align: justify; text-indent: 2em; padding-right: 20px;}
.page05_2 .frame_content::-webkit-scrollbar, .bg3::-webkit-scrollbar{width: 10px; background-color: #cfcfd1; border-radius: 25px;}
.page05_2 .frame_content::-webkit-scrollbar-thumb, .bg3::-webkit-scrollbar-thumb{background-color: #569ba5; border-radius: 25px;}
.btn_next, .btn_goFlowers{cursor: pointer; position: absolute; left: 50px; top: 1190px;}
.btn_goFlowers{top: 1150px;}
.page05_2 .btn_goMemorial{cursor: pointer; position: absolute; right: 50px; top: 1190px}
  
/* p6 我要献花 */
.page06{position: relative; width: 100%; height: 100%;}
.page06 .frame{position: absolute;left: 50%;margin-left: -275px;top: 28.5%;width: 550px;height: 260px;border-radius: 20px;background-color: transparent;display: flex;flex-direction: column;align-items: center;justify-content: space-around;}
.page06 .btn_msg{cursor: pointer;}
#sid3{width: 400px;padding-right: 30px;padding-left: 10px;}
#sid3 option{width: 400px; font-size: 35px; line-height: 30px; padding: 0 10px; box-sizing: border-box; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; }

/* p7 敬献成功页面 */
.page07 , .capture{position: absolute;  width: 100%; height: 100%; overflow: hidden;}
.bg7{background: url(bg7.jpg) no-repeat center center/100% 100%;}
.icon_monument{position: absolute;width: 278px;height: 436px;left: 268px;top: 242px;}
.icon_flowers{position: absolute;width: 432px;height: 182px;left: 186px;top: 579px;}
.page07 .frame{width: 611px;height: 459px;position: absolute;left: 95px;top: 670px;background: url(./l/l_f1.png) no-repeat top center /100% 100%;box-sizing: border-box;padding: 40px 60px;display: flex;flex-direction: column;align-items: center;justify-content: space-between;} 
.page07 .frame p{font-size: 30px;line-height: 48px;color:#569ba5;text-align: justify;margin-bottom: 20px;}
.page07 .frame p span{color: #edba32;}
.icon_box{display: flex;justify-content: center;width: 494px;height: 232px;padding: 20px;box-sizing: border-box;background: url(./l/l_f2.png) no-repeat top center /100% 100%;align-items: center;}
.icon_box img{
/* 允许图片成为鼠标事件的target */pointer-events:auto;-webkit-pointer-events:auto;-ms-pointer-events:auto;-moz-pointer-events:auto;}

.yl_flowers{position: absolute; left: 300px; top: 550px; width: 250px;}
.yl_flowers img{width: 100%}

/* 英名扬星海 */
.yl_name{ display: none; width: 100%;height: 800px;position: relative;top: 100px;perspective: 1000px;}
.name{ position: absolute; width: 200px;height: 200px;}
.name img{width: 100%;height: 100%;}

.name:nth-child(1){left: 300px; top: 550px}
.name:nth-child(2){left: 430px; top: 130px}
.name:nth-child(3){left: 20px; top: 280px}
.name:nth-child(4){left: 150px; top: 50px}
.name:nth-child(5){left: 90px; top: 480px}
.name:nth-child(6){left: 380px; top: 220px}
.name:nth-child(7){left: 510px; top: 650px}
.name:nth-child(8){left: 80px; top: 500px}
.name:nth-child(9){left: 230px; top: 130px}
.name:nth-child(10){left: 150px; top: 630px}
.name:nth-child(11){left: 50px; top: 350px}
.name:nth-child(12){left: 350px; top: 580px}
.name:nth-child(13){left: 130px; top: 130px}
.name:nth-child(14){left: 50px; top: 80px}
.name:nth-child(15){left: 400px; top: 250px}
.name:nth-child(16){left: 400px; top: 580px}
.name:nth-child(17){left: 50px; top: 390px}
.name:nth-child(18){left: 130px; top: 130px}
.name:nth-child(19){left: 510px; top: 650px}
.name:nth-child(20){left: 90px; top: 480px}
.name:nth-child(21){left: 400px; top: 580px}
.name:nth-child(22){left: 50px; top: 300px}
.name:nth-child(23){left: 150px; top: 580px}
.name:nth-child(24){left: 430px; top: 130px}
.name:nth-child(25){left: 20px; top: 280px}
.name:nth-child(26){left: 150px; top: 50px}
.name:nth-child(27){left: 90px; top: 480px}
.name:nth-child(28){left: 380px; top: 220px}
.name:nth-child(29){left: 510px; top: 650px}
.name:nth-child(30){left: 80px; top: 500px}
.name:nth-child(31){left: 230px; top: 130px}
.name:nth-child(32){left: 150px; top: 630px}
.name:nth-child(33){left: 50px; top: 350px}
.name:nth-child(34){left: 350px; top: 580px}
.name:nth-child(35){left: 130px; top: 130px}
.name:nth-child(36){left: 430px; top: 130px}

.btn_pop{cursor: pointer; position: absolute; left: 50%; margin-left: -157.5px; top: 1150px;}
.pop{position: absolute; left: 95px; top: 226px; width: 608px; height: 908px; background-color: #fff; border: 3px solid #62bbb2; border-radius: 30px; box-sizing: border-box;}

.btn_close{cursor: pointer; position: absolute; right: 30px; top: 19px;}
.code_box{position: relative;top: 150px;display: flex;justify-content: space-evenly;width: 100%;align-items: center;}

.btn_restart{cursor: pointer; position: absolute; left: 50%; margin-left: -157.5px; top: 620px;}
.btn_share{cursor: pointer; position: absolute; left: 50%; margin-left: -157.5px; top: 730px;}

/* 樱花 */
.yhpl {
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.yhpl .petal {
    position: absolute;
    background: url(icon_flowers2.png) no-repeat;
    background-size: contain;
    opacity: 0.8;
    animation: falling linear infinite;
}

@keyframes falling {
    0% {
        transform: translateY(-10%) rotate(0deg);
        opacity: 0.8;
    }
    100% {
        transform: translateY(5000%) rotate(360deg);
        opacity: 0.6;
    }
}

/* p8 长征页 */
.page08 .frame{background: url(frame_content.png) no-repeat center center/100% 100%;position: absolute;left: 50%;margin-left: -358px;top: 152px;width: 716px;height: 942px;display: flex;flex-direction: column;align-items: center;padding: 80px 40px;box-sizing: border-box;}
.page08 .frame_tx{margin-top: 20px;/* margin-bottom: 50px; */}
.page08 .frame_content{height: 800px;padding: 0px 26px;box-sizing: border-box;overflow-y: auto;}
.page08 .frame_content p{margin-top: 15px; font-size: 30px; line-height: 48px; color:#3d494c; text-align: justify; text-indent: 2em; padding-right: 20px;}
.page08 .frame_content::-webkit-scrollbar, .bg3::-webkit-scrollbar{width: 10px; background-color: #e9e9e9; border-radius: 25px;}
.page08 .frame_content::-webkit-scrollbar-thumb, .bg3::-webkit-scrollbar-thumb{background-color: #a4c5a2; border-radius: 25px;}

.page08 .btn_goFlowers{cursor: pointer; width: 337px; height: 142px; position: absolute; left: 232px; bottom: 115px;}