*{ margin: 0; padding: 0; box-sizing: border-box;}
html,body{ width: 100%; height: 100%;}

.index{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.index_in{ width: 750px; height: 100%; position: relative; overflow: hidden;}

/* 一、loading */
.page_loading{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;
	background-color: #64C2EB; z-index: 1;}
.loading_logo_box{ width: 385px; height: 454px; position: absolute; top: 256px; left: 50%; transform: translateX(-50%);}
.ripple_box{ width: 385px; height: 454px; position: absolute; top: 0px; left: 0px;}
.ripple1{ width: 385px; height: 454px; position: absolute; top: 0px; left: 0px; transform: scale(.8);
	background: url(../imgs/ripple_all.png) no-repeat; background-size: cover;}
.ripple2{ width: 385px; height: 454px; position: absolute; top: 0px; left: 0px; transform: scale(.8);
	background: url(../imgs/ripple_all.png) no-repeat; background-size: cover;}
.ripple3{ width: 385px; height: 454px; position: absolute; top: 0px; left: 0px; transform: scale(.8);
	background: url(../imgs/ripple_all.png) no-repeat; background-size: cover;}
.logo_loading_hi{ width: 192px; height: 332px; position: absolute; top: 56px; left: 90px;
	background: url(../imgs/logo_loading_hi.png) no-repeat; background-size: cover;}
.bubble_loading_box{ width: 41px; height: 49px; position: absolute; top: 156px; left: 54px;
	background: url(../imgs/bubble_loading.png) repeat-x; background-position: 0 0;}
.bubble_loading{ width: 41px; height: 49px;}

.text_loading{ width: 100%; height: 212px; position: absolute; bottom: 262px; left: 0px; display: inline-block; overflow: hidden; transform: translateY(-100%); display: flex; justify-content: center; align-items: center;}
.img_text_loading{ width: 255px; height: 212px; transform: translateY(100%);
	background: url(../imgs/text_loading.png) no-repeat; background-size: cover;}
.logo_loading{ width: 271px; height: 45px; position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);
	background: url(../imgs/logo_loading.png) no-repeat; background-size: cover;}


/* 二、场景 */
.page_scenes{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: 0;}
.scene_qd,.scene_fj,.scene_dl,.scene_sy,.scene_sz{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;}
/* 场景一 青岛 */
.scene_qd{ 
	/* background: url(../imgs/scene_bg1.png) no-repeat; background-size: 100% 100%; */
	display: none;}
/* 场景二 福建 */
.scene_fj{ 
	background: url(../png/xiamen/bg.png) no-repeat; background-size: 100% 100%; 
	display: none;}
/* 场景三 大连 */
.scene_dl{ 
	/* background: url(../imgs/scene_bg3.png) no-repeat; background-size: 100% 100%; */
	display: none;}
/* 场景四 三亚 */
.scene_sy{ 
	background: url(../png/sanya/bg.jpg) no-repeat; background-size: 100% 100%; 
	display: none;}
/* 场景五 深圳 */
.scene_sz{ 
	background: url(../png/shenzhen/bg.png) no-repeat; background-size: 100% 100%; 
	display: none;}

/* 场景一 青岛--鸟 */
.bird_box{ width: 750px; height: 141px; position: absolute; top: 552px; left: 0px;}
.bird_box img{ width: 750px; height: 141px;}

/* 场景四 三亚 */
.scene_bg4_2{ width: 750px; height: 1325px; position: absolute; bottom: 0px; left: 0px;
	background: url(../png/sanya/bg2.png) no-repeat; background-size: cover;}
.scene4_car{ width: 388px; height: 168px; position: absolute; bottom: 96px; left: 106px;
	background: url(../png/sanya/car.png) no-repeat; background-size: cover;
	animation: car_shake 4s linear infinite;}
.plane_box{ width: 750px; height: 350px; position: absolute; bottom: 604px; left: 0px;}
.plane_box{ width: 750px; height: 350px;}

/* 场景五 深圳 */
.scene5_cloud{ width: 816px; height: 295px; position: absolute; top: 268px; left: 0px;
	background: url(../png/shenzhen/cloud.png) no-repeat; background-size: cover; transform: translateX(-2px);
	animation: cloud_move 5s linear infinite;}

/* .scene_bg1_box{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;} */
.scene_bg1_top{ width: 750px; height: 100%; position: absolute; top: 0px; left: 0px;
	background: url(../png/qingdao/bg.png) no-repeat; background-size: 100% 100%;}
.scene_bg1{ width: 750px; height: 100%; position: absolute; top: 0px; left: 0px;
	background: url(../png/qingdao/bg2.jpg) no-repeat; background-size: 100% 100%;}
.hong_de1{ width: 750px; height: 100%; position: absolute; top: 0; left: 0; display: ;}
.scene_bg2{ width: 750px; height: 853px; position: absolute; bottom: 0px; left: 0px;
	background: url(../png/xiamen/1.png) no-repeat; background-size: cover;}
.hong_de2{ width: 750px; height: 853px; position: absolute; bottom: 0; left: 0; display: ;}
.scene_bg3{ width: 750px; height: 100%; position: absolute; bottom: 0px; left: 0px;
	background: url(../png/dalian/1.jpg) no-repeat; background-size: 100% 100%;}
.hong_de3{ width: 750px; height: 100%; position: absolute; bottom: 0; left: 0; display: ;}
.scene_bg4{ width: 750px; height: 870px; position: absolute; bottom: 0px; left: 0px;
	background: url(../png/sanya/1.png) no-repeat; background-size: cover;}
.hong_de4{ width: 750px; height: 870px; position: absolute; bottom: 0; left: 0; display: ;}
.scene_bg5{ width: 750px; height: 100%; position: absolute; bottom: 0px; left: 0px;
	background: url(../png/shenzhen/bg2.png) no-repeat; background-size: 100% 100%;}
.hong_de5{ width: 750px; height: 100%; position: absolute; bottom: 0; left: 0; display: ;}

/* 背景音乐开关 */
.audio{ position: absolute; top: 0px; left: 0px; opacity: 0;}
.switch_audio_box{ width: 54px; height: 54px; position: absolute; top: 42px; right: 38px; z-index: 3;}
.btn_pause,.btn_play{ width: 54px; height: 54px; position: absolute; top: 0px; left: 0px;}
.switch_audio_box:active,.btn_rules_close:active,.btn_poster_close:active,.btn_rules_box:active,
.btn_switch_scene_box:active,.btn_save_box:active{ 
	transform: scale(.94);}

/* 左上角提示文字 */
.title_scene_box{ width: 92px; height: 452px; position: absolute; top: 68px; left: 70px; z-index: 2;}
/* .bubble_title_box{ width: 37px; height: 56px; position: absolute; top: 0px; right: 0px; 
	background: url(../imgs/bubble_title.png) repeat-x; background-position: 0 0;} */
.bubble_title_box{ width: 65px; height: 98px; position: absolute; top: -20px; right: -18px; 
	background: url(../png/bubble/bubbles.png) repeat-x; background-position: -4px -4px;}
.bubble_title{ width: 37px; height: 56px;}
.title_scene1{ width: 59px; height: 401px; position: absolute; bottom: 0px; left: 0px;
	background: url(../imgs/title_scene1.png) no-repeat; background-size: cover;}
.title_scene2{ width: 60px; height: 369px; position: absolute; bottom: 32px; left: 0px;
	background: url(../imgs/title_scene2.png) no-repeat; background-size: cover;}
.title_scene3{ width: 61px; height: 369px; position: absolute; bottom: 32px; left: 0px;
	background: url(../imgs/title_scene3.png) no-repeat; background-size: cover;}
.title_scene4{ width: 61px; height: 369px; position: absolute; bottom: 32px; left: 0px;
	background: url(../imgs/title_scene4.png) no-repeat; background-size: cover;}
.title_scene5{ width: 59px; height: 401px; position: absolute; bottom: 0px; left: 0px;
	background: url(../imgs/title_scene5.png) no-repeat; background-size: cover;}

/* 文案 */
.copywriting_box{ width: 160px; height: 366px; position: absolute; z-index: 2;}
.copywriting_box_in{ width: 160px; height: 366px; position: absolute; top: 0px; left: 0px; overflow: hidden;}
.copywriting{ width: 160px; height: 366px;}

.scene_1 .copywriting_box{ top: 154px; right: 52px;}
.scene_2 .copywriting_box,.scene_5 .copywriting_box{ top: 154px; right: 92px;}
.scene_3 .copywriting_box{ top: 456px; left: 294px;}
.scene_4 .copywriting_box{ top: 122px; left: 294px;}
.scene_3 .copywriting_box1,.scene_4 .copywriting_box1{ left: 228px;}
.scene_3 .copywriting_box2,.scene_4 .copywriting_box2{ left: 250px;}
.scene_3 .copywriting_box3,.scene_4 .copywriting_box3{ left: 272px;}

/* 按钮 换一片海 */
.btn_left{ width: 180px; height: 149px; position: absolute; bottom: 58px; left: 70px; z-index: 2;}
.btn_text1{ width: 180px; height: 149px; position: absolute; top: 0px; left: 0px;
	background: url(../imgs/btn_text1.png) no-repeat; background-size: cover;}
.btn_left img{ width: 180px; height: 149px;}
.btn_switch_scene_box{ width: 180px; height: 149px; position: absolute; bottom: 58px; left: 70px; z-index: 2;}
.btn_switch_scene_1-1{ width: 128px; height: 128px; position: absolute; top: 0px; left: 0px;
	background: url(../imgs/btn_switch_scene_1-1.png) no-repeat; background-size: cover;}
.btn_switch_scene_1-2{ width: 128px; height: 128px; position: absolute; top: 0px; left: 0px;
	background: url(../imgs/btn_switch_scene_1-2.png) no-repeat; background-size: cover;}
.btn_switch_scene_2{ width: 128px; height: 128px; position: absolute; top: 0px; left: 0px;
	background: url(../imgs/btn_switch_scene_2.png) no-repeat; background-size: cover;}

/* 按钮 保存这片海 */
.btn_right{ width: 180px; height: 149px; position: absolute; bottom: 58px; right: 70px; z-index: 2;}
.btn_text2{ width: 180px; height: 149px; position: absolute; top: 0px; left: 0px;
	background: url(../imgs/btn_text2.png) no-repeat; background-size: cover;}
.btn_right img{ width: 180px; height: 149px;}
.btn_save_box{ width: 180px; height: 149px; position: absolute; bottom: 58px; right: 70px; z-index: 2;}
.btn_save_1-1{ width: 128px; height: 128px; position: absolute; bottom: 0px; right: 0px;
	background: url(../imgs/btn_save_1-1.png) no-repeat; background-size: cover;}
.btn_save_1-2{ width: 128px; height: 128px; position: absolute; bottom: 0px; right: 0px;
	background: url(../imgs/btn_save_1-2.png) no-repeat; background-size: cover;}
.btn_save_2{ width: 128px; height: 128px; position: absolute; bottom: 0px; right: 0px;
	background: url(../imgs/btn_save_2.png) no-repeat; background-size: cover;}


/* 三、弹层 长按保存海报 */
.layer_bg{ width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 4;
	background-color: rgba(0, 0, 0, .7);}

/* 长按保存海报弹层 */
.layer_poster_box,.layer_rules_box{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;
	display: flex; justify-content: center; align-items: center;}
.layer_poster{ width: 492px; height: 984px; position: relative;
	background: url(../imgs/layer_poster_bg.png) no-repeat; background-size: cover;}
.img_poster{ width: 424px; height: 752px; position: absolute; top: 32px; left: 34px;}
.btn_poster_close{ width: 31px; height: 31px; position: absolute; top: 52px; right: 56px;
	background: url(../imgs/btn_poster_close.png) no-repeat; background-size: cover;}

/* 按钮 规则及详情 */
.btn_rules_box{ width: 120px; height: 50px; position: absolute; bottom: 46px; left: 314px;
	display: flex; justify-content: center; align-items: center;}
.btn_rules{ width: 104px; height: 27px; background: url(../imgs/btn_rules.png) no-repeat; background-size: cover;}

/* 活动规则弹层 */
.layer_rules{ width: 569px; height: 582px; position: relative;
	background: url(../imgs/img_rules.png) no-repeat; background-size: cover;}
.btn_rules_close{ width: 39px; height: 38px; position: absolute; top: 42px; right: 58px;
	background: url(../imgs/btn_rules_close.png) no-repeat; background-size: cover;}


/* 动画效果 */

/* 嗨logo 跳出 */
.logo_hi_show{ animation: logo_scale .8s ease-in 1 forwards;}
/* .logo_loading_hi{ animation: logo_scale .8s ease-in 1 forwards;} */
/* .logo_loading_hi{ animation: logo_scale .8s ease-in infinite reverse;} */
/* .demo{ animation: logo_scale 1s linear infinite;} */
@keyframes logo_scale {
	0% { transform: scale(.5);}
	60% { transform: scale(1.2);}
	70% { transform: scale(.9);}
	80% { transform: scale(1.2);}
	90% { transform: scale(1);}
	100% { transform: scale(1.1);}
}

/* 海浪波纹逐渐扩散 */
/* .ripple_show{ animation: ripple_scale 1.2s linear infinite;} */
.ripple_show .ripple1_show{ animation: ripple_scale1 3s linear infinite;}
.ripple_show .ripple2_show{ animation: ripple_scale2 3s linear 1s infinite;}
.ripple_show .ripple3_show{ animation: ripple_scale3 3s linear 2s infinite;}
/* .ripple_box .ripple1_show{ animation: ripple_scale1 3s linear infinite;}
.ripple_box .ripple2_show{ animation: ripple_scale2 3s linear infinite;}
.ripple_box .ripple3_show{ animation: ripple_scale3 3s linear infinite;} */
@keyframes ripple_scale1 {
	0% { transform: scale(.8); opacity: 1;}
	80% { opacity: 1;}
	100% { transform: scale(1.2); opacity: 0;}
}
@keyframes ripple_scale2 {
	0% { transform: scale(.8); opacity: 1;}
	80% { opacity: 1;}
	100% { transform: scale(1.2); opacity: 0;}
}
@keyframes ripple_scale3 {
	0% { transform: scale(.8); opacity: 1;}
	80% { opacity: 1;}
	100% { transform: scale(1.2); opacity: 0;}
}

/* loading气泡冒出 */
.bubble_loading_show{ animation: bubble_1 1.2s steps(5) infinite;}
/* .bubble_loading_box{ animation: bubble_1 1.2s steps(4) 1 forwards;} */
@keyframes bubble_1 {
	0% { background-position: 0px 0;}
	100% { background-position: -205px 0;}
}

/* loading文案逐句出现 */
.text_loading_show{ animation: box_gradient 1.2s linear 1 forwards;}
.text_loading_show > img{ animation: img_gradient 1.2s linear 1 forwards;}
/* .text_loading{ animation: box_gradient 1.2s linear 1 forwards;}
.text_loading > img{ animation: img_gradient 1.2s linear 1 forwards;} */


/* 场景 */
/* 提示文字上方小气泡冒出 */
/* .bubble_title_show{ animation: bubble_2 2s steps(5) infinite;} */
.bubble_title_box{ animation: bubble_2 2s steps(24) infinite;}
@keyframes bubble_2 {
	0% { background-position: -4px -4px;}
	100% { background-position: -1760px -4px;}
}
/* @keyframes bubble_2 {
	0% { background-position: 0px 0;}
	100% { background-position: -185px 0;}
} */

/* 文案渐显 */
/* .copywriting_show{ animation: box_gradient 2s linear 1 forwards; -webkit-animation: box_gradient 2s linear 1 forwards;} */
.copywriting_show .copywriting{ animation: img_opacity 2s linear 1 forwards; -webkit-animation: img_opacity 2s linear 1 forwards;}
/* .copywriting_box_in{ animation: box_gradient 2s linear 1 forwards; -webkit-animation: box_gradient 2s linear 1 forwards;}
.copywriting_box_in .copywriting{ animation: img_gradient 2s linear 1 forwards; -webkit-animation: img_gradient 2s linear 1 forwards;} */

@keyframes img_opacity {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

@keyframes box_gradient {
	0% { transform: translateY(-100%); -webkit-transform: translateY(-100%);}
	100% { transform: translateY(0); -webkit-transform: translateY(0);}
}
@-webkit-keyframes box_gradient {
	0% { transform: translateY(-100%); -webkit-transform: translateY(-100%);}
	100% { transform: translateY(0); -webkit-transform: translateY(0);}
}
@keyframes img_gradient {
	0% { transform: translateY(100%); -webkit-transform: translateY(100%);}
	100% { transform: translateY(0); -webkit-transform: translateY(0);}
}
@-webkit-keyframes img_gradient {
	0% { transform: translateY(100%); -webkit-transform: translateY(100%);}
	100% { transform: translateY(0); -webkit-transform: translateY(0);}
}

/* 三亚 车上下抖动 */
@keyframes car_shake {
	0% { transform: translateY(0px);}
	2% { transform: translateY(-1px);}
	4% { transform: translateY(1px);}
	5% { transform: translateY(-1px);}
	8% { transform: translateY(1px);}
	10% { transform: translateY(-1px);}
	12% { transform: translateY(1px);}
	16% { transform: translateY(-2px);}
	18% { transform: translateY(1px);}
	20% { transform: translateY(-1px);}
	22% { transform: translateY(1px);}
	24% { transform: translateY(-1px);}
	26% { transform: translateY(1px);}
	28% { transform: translateY(-2px);}
	30% { transform: translateY(1px);}
	32% { transform: translateY(-1px);}
	34% { transform: translateY(1px);}
	36%,100% { transform: translateY(0px);}
}

/* 深圳 云左右移动 */
@keyframes cloud_move {
	0% { transform: translateX(-2px);}
	50% { transform: translateX(-30px);}
	100% { transform: translateX(-2px);}
}

/* 下方按钮水滴弹出 */
.btn_show .btn_switch_scene_1-1,.btn_show .btn_save_1-1{ animation: btn_pop1 .4s ease-in 1 forwards;}
.btn_show .btn_switch_scene_1-2,.btn_show .btn_save_1-2{ animation: btn_pop2 .4s ease-in 1 forwards;}
.btn_box .btn_switch_scene_1-1,.btn_box .btn_save_1-1{ animation: btn_pop1 .4s ease-in 1 forwards;}
.btn_box .btn_switch_scene_1-2,.btn_box .btn_save_1-2{ animation: btn_pop2 .4s ease-in 1 forwards;}

@keyframes btn_pop1 {
	0% { transform: scale(.6) rotate(20deg);}
	100% { transform: scale(1) rotate(0deg);}
}
@keyframes btn_pop2 {
	0% { transform: scale(.6) rotate(-20deg);}
	100% { transform: scale(1) rotate(0deg);}
} 


@media (max-height: 1220px) {
	.loading_logo_box{ top: 150px;}
	
}