*,
*::before,
*::after {margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;-webkit-tap-highlight-color: transparent;}
* {-webkit-overflow-scrolling: touch;}
body {font-family: "Microsoft YaHei", sans-serif;color: #333;}
ul,
ol {list-style: none;}
a {text-decoration: none;color: #333;}
input,
textarea {border: none;outline: none;resize: none;}
html,
body {width: 100%;height: 100%;margin: 0;padding: 0;font-size: 20px;}

.a1 {animation-delay:0.25s;-webkit-animation-delay:0.25s;}
.a2 {animation-delay:0.5s;-webkit-animation-delay:0.5s;}
.a3 {animation-delay:0.75s;-webkit-animation-delay:0.75s;}
.a4 {animation-delay:1s;-webkit-animation-delay:1s;}
.a5 {animation-delay:1.25s;-webkit-animation-delay:1.25s;}
.a6 {animation-delay:1.5s;-webkit-animation-delay:1.5s;}
.a7 {animation-delay:1.75s;-webkit-animation-delay:1.75s;}
.a8 {animation-delay:2s;-webkit-animation-delay:2s;}
.a9 {animation-delay:2.25s;-webkit-animation-delay:2.25s;}
.a10 {animation-delay:2.5s;-webkit-animation-delay:2.5s;}
.a11 {animation-delay:2.75s;-webkit-animation-delay:2.75s;}
.a12 {animation-delay:3s;-webkit-animation-delay:3s;}
.a13 {animation-delay:3.25s;-webkit-animation-delay:3.25s;}
.a14 {animation-delay:3.5s;-webkit-animation-delay:3.5s;}
.a15 {animation-delay:3.75s;-webkit-animation-delay:3.75s;}
.a16 {animation-delay:4s;-webkit-animation-delay:4s;}
.a17 {animation-delay:4.25s;-webkit-animation-delay:4.25s;}
.a18 {animation-delay:4.5s;-webkit-animation-delay:4.5s;}
.a19 {animation-delay:4.75s;-webkit-animation-delay:4.75s;}
.b1 {animation-duration: 0.5s;-webkit-animation-duration:0.5s;}
.b2 {animation-duration: 1s;-webkit-animation-duration:1s;}
.b3 {animation-duration:1.5s;-webkit-animation-duration:1.5s;}
.b4 {animation-duration:2s;-webkit-animation-duration:2s;}
.b5 {animation-duration:2.5s;-webkit-animation-duration:2.5s;}

.p {width: 100%;height: 100%;overflow: hidden;position: absolute;top: 0;left: 0;background: #f2c1d8;display: none;}

.p1 {display: block;}

.logo {height: 48px;position: absolute;top: 6.15%;left: 50%;margin-left: -158.5px;}
.index_img {width: calc(100% - 18px);position: absolute;bottom: -395px;left: 9px;}
.index_container {width: 418px;height: 47%;min-height: 626px;position: absolute;top: 14.54%;left: 50%;margin-left: -209px;display: flex;justify-content: space-between;align-items: center;flex-direction: column;transform-origin: center top;}
.title_container {width: 418px;height: 40.2%;display: flex;justify-content: space-between;align-items: center;flex-direction: column;}
.title_container div {display: flex;justify-content: space-between;align-items: center;flex-direction: column;}
.title_container div:first-of-type {height: 98px;}
.title_container div:last-of-type {height: 120px;}
.index_container .btn_box {width: 290px;height: 154px;display: flex;justify-content: space-between;align-items: center;position: relative;}
.btn_takeInput {width: 123px;height: 155px;position: absolute;top: 0;left: 0;opacity: 0;}

.bottom_btn_box {width: 698px;position: absolute;bottom: 1.5%;left: 50%;margin-left: -349px;display: flex;justify-content: space-between;align-items: center;}
.bottom_btn_box img {height: 40px;}
.take_container {width: 636px;height: 70.16%;background: #fff;border-radius: 13px;position: absolute;top: 5.4%;left: 50%;margin-left: -318px;}
#video,#canvas {width: 636px;height: 70.16%;position: absolute;top: 0;left: 0;}
#canvas {opacity: 0;}
.btn_take {position: absolute;bottom: -158px;left: 50%;margin-left: -64px;}
.line_lt {position: absolute;top: 32px;left: 38px;}
.line_rt {position: absolute;top: 32px;right: 38px;}
.line_lb {position: absolute;bottom: 32px;left: 38px;}
.line_rb {position: absolute;bottom: 32px;right: 38px;}
.icon_rec {position: absolute;top: 65px;left: 74px;}
.line_center {position: absolute;top: 50%;left: 50%;margin-top: -177px;margin-left: -92px;}
.btn_true {position: absolute;bottom: -80px;left: 50%;margin-left: -86.5px;}
.upload_img,.takeShow_img {width: 100%;height: 100%;border-radius: 13px;overflow: hidden;}
.upload_img img,.takeShow_img img {width: 100%;height: 100%;display: block;opacity: 0;}
#upload_input {width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;}
.poster_logo {height: 86px;position: absolute;top: 4%;left: 44px;}
.show_img {width: 100%;height: 100%;display: block;opacity: 0;}
.game_container,#new_haibao {width: 694px;height: 76.56%;background: #fff;position: absolute;top: 5.4%;left: 50%;margin-left: -347px;}
.game_body {width: 694px;height: 76.56%;border-radius: 13px;overflow: hidden;}
.nav_list {width: 712px;height: 94px;position: absolute;top: calc(82% + 32px);left: 50%;margin-left: -356px;white-space: nowrap;overflow-y: hidden;overflow-x: auto;}
.nav_list::-webkit-scrollbar {display: none;}
.nav_list .item {width: 94px;height: 94px;display: inline-block;margin-right: 10px;}
.btn_create {position: absolute;top: calc(82% + 158px);left: 50%;margin-left: -86.5px;}
.func_btn_box {width: 688px;height: 47px;position: absolute;top: calc(82% + 54px);left: 50%;margin-left: -344px;display: flex;justify-content: space-between;align-items: center;}
#take-img {width: 100%;height: 100%;display: block;opacity: 0;}
#new_haibao {border-radius: 13px;overflow: hidden;}
.rule_container {width: 672px;height: 77.14%;position: absolute;top: 12.89%;left: 50%;margin-left: -336px;display: flex;justify-content: space-between;align-items: center;flex-direction: column;}
.rule_body {width: 100%;height: calc(100% - 62px);border: 2px solid #d397b5;background: #fff;border-radius: 46px;overflow-x: hidden;overflow-y: auto;}
.rule_body::-webkit-scrollbar {display: none;}
.rule_body div {position: relative;}
.rule_body .rule {width: 100%;display: block;}
.btn_attend1 {position: absolute;top: 2020px;left: 50%;margin-left: -86.5px;}
.btn_attend2 {position: absolute;top: 3270px;left: 50%;margin-left: -86.5px;}
.close {position: absolute;top: 106px;right: 40px;}

.photoViewer {width: 100%;height: 100%;background: rgba(0,0,0,.5);position: absolute;top: 0;left: 0;display: none;}
.photoViewer2 {width: 100%;height: 100%;background: rgba(0,0,0,.5);position: absolute;top: 0;left: 0;display: none;}
#clipBtn,#clipBtn2 {position: absolute;bottom: 6%;left: 50%;margin-left: -86.5px;}
.clip_tips {font-size: 22px;color: #fff;line-height: 1em;position: absolute;bottom: calc(6% + 67px);left: 50%;transform: translateX(-50%);}
#comm {overflow:hidden;}
#comm_inner {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;}
#comm_inner > div { position:absolute; left:20%; top:10%;  transform-origin:center center; }
#comm_inner > div .btn_fd { display:none;}
#comm_inner > div .btn_remove { display:none;}
#comm_inner > div .btn_z { display:none;}
.sel { border:dotted 1px #fff;}
#comm_inner  .sel .btn_fd { display:block; position:absolute; top:-30px; right:-30px;}
#comm_inner  .sel .btn_remove { display:block; position:absolute; bottom:-30px; left:-30px;}
#comm_inner  .sel .btn_z { display:block; position:absolute; top:-30px; left:-30px;}
#comm_inner > div .img {width: 150px;}

#take-img2 {height: 100vh;position: absolute;top: 0;left: 0;opacity: 0;}