#loading{width:100%;height:100%;position:fixed;top:0;left:0;background:#000;z-index:20;font-size:18px;color:#cfd1cc;z-index:101}#loading .box{width:100%;height:1px;background:#414141;margin:0 auto;position:relative;top:50%;transform:translateY(-50%);left:0}#loading .box span{height:1px;background:#c4c4c4;position:relative;top:0;left:0;display:block}#loading .box p{font-size:16px;line-height:30px;color:silver;text-align:center}
body{width:100%; background: #383838; scrollbar-width: thin; scrollbar-color: #9f6034 #fff1c8;}
.wraper{width:100%; min-width: 1200px; max-width: 1920px; margin:43px auto 0; position: relative; overflow: hidden; background: #383838; }
.wraper .logo{ width: 160px; height: 45px; left:calc(50% + 444px); top: 18px; background: url(../images/logo.png) no-repeat; text-indent: -9999px; z-index: 10;}
.wraper .layer { width: 100%; margin: 0 auto; height: 1060px; position: relative; overflow: hidden;}
.wraper .layer .mask{ width: 1920px; height: 100%; left:calc(50% - 960px); top: 0; background: url(../images/mask.png) no-repeat; z-index: 5;}
.wraper .layer .bgimg{ width: 1920px; height: 100%; left:calc(50% - 960px); top: 0; background: url(../images/bg.jpg) no-repeat;}
.wraper .layer .npc1{ width: 1920px; height: 100%; left:calc(50% - 960px); top: 0; background: url(../images/n-1.png) no-repeat; z-index: 3;}
.wraper .layer .npc2{ width: 1920px; height: 100%; left:calc(50% - 960px); top: 0; background: url(../images/n-2.png) no-repeat; z-index: 2;}
.wraper .layer .npc3{ width: 1920px; height: 100%; left:calc(50% - 960px); top: 0; background: url(../images/n-3.png) no-repeat; z-index: 1;}

.wraper .bub1{ width: 398px; height: 395px; left:calc(50% - 768px); top: 0; z-index: 6;}
.wraper .bub1::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/p-1.png) no-repeat; animation: move1 5s linear 1s infinite;}
.wraper .bub2{ width: 436px; height: 466px; left:calc(50% + 190px); top: 674px; z-index: 6;}
.wraper .bub2::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/p-2.png) no-repeat; animation: move1 5s linear infinite;}
.wraper .bub3{ width: 314px; height: 316px; left:calc(50% + 580px); top: 0; z-index: 6;}
.wraper .bub3::after{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: url(../images/p-3.png) no-repeat; animation: move1 5s linear 2s infinite;}

.wraper .content{ width:100%; overflow: hidden; margin: 0 auto; text-align: center; color: #323232; background: url(../images/bg_02.jpg) no-repeat 50% 0,url(../images/bg_03.jpg) no-repeat 50% 1300px}
.wraper .content .login .btn{ width: 248px; height: 82px; position: absolute; left:calc(50% - 124px); top: 980px; z-index: 6;}
.wraper .content .login .btn-login{ background: url(../images/btn-login.png) no-repeat; text-indent: -9999px;}
.wraper .content .login .btn-logined{ background: url(../images/btn-out.png) no-repeat; color: #323232; font-weight: bold; font-size: 20px; display: flex; justify-content: center; align-items: center;}

.wraper .content .txt{ width: 690px; height: 140px; margin: 0 auto 276px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold;}
.wraper .content .box1 { height: 1130px;}
.wraper .content .box1 .desc{ width: 984px; height: 170px; margin: 0 auto; font-weight: bold; font-size: 22px; text-align: left;}
.wraper .content .box1 .desc p b{ color: #ff6420;}
.wraper .content .box1 .desc span{ font-size: 16px; display: block; color: #3d3d3d; font-weight: normal; margin-top: 15px;}
.wraper .content .box1 .sushi{ width: 1024px; height: 348px; margin: 0 auto;}
.wraper .content .box1 .sushi ul{ width: 1024px; height: 320px; margin-left: -5px; display: flex; justify-content: space-between;}
.wraper .content .box1 .sushi ul li{ width: 308px; position: relative; font-size: 20px;}
.wraper .content .box1 .sushi ul li strong{width: 100%; height: 40px; line-height: 40px; display: block;  color: #53000e; text-align: center; position: absolute; left: 0; top: 0;}
.wraper .content .box1 .sushi ul li .pic{ width: 100%; height: 256px; overflow: hidden;}
.wraper .content .box1 .sushi ul li .pic .icon{ width: 140px; height: 140px; margin: 64px auto 0; position: relative;}
.wraper .content .box1 .sushi ul li .pic .icon::before{ content: ""; width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: url(../images/sushi.png) no-repeat; -webkit-filter: grayscale(100%);filter: grayscale(100%);}
.wraper .content .box1 .sushi ul li .pic .icon span{ width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: url(../images/sushi.png) no-repeat center bottom; -webkit-filter: grayscale(0%);filter: grayscale(0%);}

.wraper .content .box1 .sushi ul li p{ height: 62px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold;}
.wraper .content .box1 .sushi ul li p span{ color: #da0024;}
.wraper .content .box1 .btn-inject{ width: 248px; height: 83px; display: block; margin: 0 auto; background: url(../images/btn-1.png) no-repeat; text-indent: -9999px;}
.wraper .content .box1 .btn-inject:hover{ background-position: center bottom;}
.wraper .content .box2{ height: 2295px;}
.wraper .content .box2 .desc{ width: 890px; height: 140px; margin: 0 auto 50px; display: flex; justify-content: center; align-items: center; font-size: 22px; font-weight: bold;}
.wraper .content .box2 .box-cj{ width: 916px; height: 163px; margin: 0 auto; display: flex; justify-content: space-between;}
.wraper .content .box2 .box-cj p{ width: 363px; height: 142px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #323232; font-weight: bold;}
.wraper .content .box2 .box-cj p span{ color: #db0024; margin: 0 3px;}
.wraper .content .box2 .box-cj .btn-raffle{ width: 142px; height: 145px; background: url(../images/btn-2.png) no-repeat; text-indent: -9999px;}
.wraper .content .box2 .btn-gifts{ width: 202px; height: 73px; display: block; margin: 0 auto; background: url(../images/btn-3.png) no-repeat; text-indent: -9999px;}
.wraper .content .box2 .btn-gifts:hover,.wraper .content .login .btn-logined:hover{ filter: brightness(1.2)}
.wraper .content .box2 .box-gifts{ margin: 1350px auto 0;}
.wraper .content .box2 .box-gifts .rule{ width: 1136px; height: 323px; padding: 85px 0 0 80px; box-sizing: border-box; margin: 0 auto; background: url(../images/box-tips.png) no-repeat; text-align: left;}
.wraper .content .box2 .box-gifts .rule p{ font-weight: bold; font-size: 18px; color: #3d3d3d;}
.wraper .content .box2 .box-gifts .rule p a{ color: #ff6420; padding: 0 10px; text-decoration: underline;}
.wraper .content .box2 .box-gifts .rule p span{ font-weight: normal;}
.wraper .content .box1 .btn-inject:hover,.wraper .content .box2 .box-cj .btn-raffle:hover,.wraper .content .login .btn-login:hover{ background-position: center bottom;}


.pop {width:586px; height: 273px; background: url(../images/pop-1.png) no-repeat; box-sizing: border-box;padding: 30px;display: none;}
.pop .btn_close {width: 36px;height: 36px;position: absolute;right: -38px;top: 0px;text-indent:-999em; background: url(../images/btn-close.png) no-repeat 0 0;}
.pop h4,.pop p b{color:#5e2a00;font-size: 24px;font-weight: bold;line-height: 38px;height: 38px;text-align: center; margin-bottom: 10px;}
.pop p { height: 68%; width: 100%; text-align: center; color: #3d3d3d; font-size: 20px; line-height:30px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: bold;}
.pop p a{ color: #da0024; text-decoration: underline;}
.pop p span{ font-size: 16px; font-weight: normal; margin-top: 12px; line-height: 25px;}

.pop-gift{ width: 926px; height: 353px; background: url(../images/pop-2.png) no-repeat;}
.pop-gift .gifts{ width:820px; margin:20px auto 0; text-align: center; font-size: 22px; color: #5e2a00;}
.pop-gift .gifts .thead{ width: 820px;  margin-bottom: 10px; font-weight: bold;}
.pop-gift .gifts .tbody{ width: 840px; max-height:156px; overflow-x: hidden;overflow-y: auto;}
.pop-gift .gifts table{ width: 820px; }
.pop-gift .gifts table tr td{ line-height: 20px; padding: 5px 0;font-size: 16px;}
.pop-gift .gifts table tr td a{ color: #c83400; text-decoration: underline;}
.pop-gift .gifts table tr td:nth-child(1){ width: 33%;}
.pop-gift .gifts table tr td:nth-child(2){ width: 35%;}
.pop-gift .gifts table tr td:nth-child(3){ width: 18%;}
.pop-gift .gifts table tr td:nth-child(4){ width: 15%;}
.pop-gift .gifts .txt{ margin: 60px auto 0; color: #78563a;}

.pop .btns {width: 100%;display: flex;justify-content: center;}
.pop .btns a{ width: 172px; height: 63px; line-height: 50px; background: url(../images/btn-confirm.png) no-repeat; margin: 0 10px; font-size: 24px; text-align: center; font-weight: bold; color: #49260d; display: inline-block; -webkit-filter: grayscale(100%);filter: grayscale(100%);}

.pop .btns .btn{ -webkit-filter: grayscale(0%);filter: grayscale(0%);}
.pop .btns .btn:hover{ filter: brightness(1.1)}


@keyframes move1 {
	0%,100%{ transform: translateY(0);}
	50% {transform: translateY(-30px);;}
}