@import"https://img5.tiancitycdn.com/fs2c/homepage/v1/css/base.css";
html body{background:#383838;width:100%;}
#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: #c0c0c0; text-align: center;}
.wraper{width:100%; min-width: 1200px; max-width: 1920px; margin:40px auto 0; position: relative; overflow: hidden; background: #383838; }
.wraper .bg { width: 100%; margin: 0 auto}
.wraper .bg div { height: 900px;}

.wraper .bg .bg2 { background: url(../images/bg_02.jpg) repeat-y center top;}
.wraper .bg .bg3 { background: url(../images/bg_03.jpg) repeat-y center top;}
.wraper .bg .bg4 { background: url(../images/bg_04.jpg) repeat-y center top;}
.wraper .bg .bg5 { background: url(../images/bg_05.jpg) repeat-y center top;}
.wraper .bg .bg6 { height: 787px; background: url(../images/bg_06.jpg) repeat-y center top;}
.wraper .bg div:last-child::after{ content: ""; width: 100%; height: 382px; position: absolute; left: 0; bottom: 0; background: url(../images/bg-bottom.png) no-repeat;}
.wraper .content{ width:100%; min-width: 1200px; margin:0 auto; position:absolute; top: 0; left: 0;}
.wraper .layer { width: 100%; margin: 0 auto 94px; height: 900px; position: relative; overflow: hidden;}
.wraper .layer::after{ content: ""; width: 100%; height: 382px; position: absolute; left: 0; bottom: 0; background: url(../images/bg-bottom.png) no-repeat; z-index: 6;}
.wraper #obindex{ width: 162px; height: 104px; position:absolute; top: 26px; left: 50%; margin-left: -614px; z-index: 10; text-indent:-999em; background: url(../images/logo.png) no-repeat;}
.wraper .bgimg{ width: 1920px; height: 100%; position: absolute; left: 50%; top: 0; margin-left: -960px; background: url(../images/bg_01.jpg) no-repeat center top; z-index: 1; }
.wraper .slogan{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/slogan.png) no-repeat; z-index: 7; }
.wraper .npc1{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/npc-1.png) no-repeat center top;; z-index: 4;}
.wraper .mask{ width: 1920px; height: 100%; position: absolute; left: 50%; bottom: 0; margin-left: -960px; background: url(../images/mask.png) no-repeat center top;; z-index: 6;}
#obindex{ opacity: 0; filter: blur(10px);}
.layer .bgimg,.layer .slogan{ opacity: 0; transform: scale(1.8);filter: blur(10px);} 
.layer .npc1{ transform: translate(0,200px) scale(.8); opacity: 0; filter: blur(10px);} 
.layer .mask{ opacity: 0; transform: translate(0,100px) scale(.2);filter: blur(10px);} 

.load_complate #obindex,.load_complate .layer .bgimg,.load_complate .layer .slogan,.load_complate .layer .npc1,.load_complate .layer .mask{ filter: blur(0); transform: scale(1) translate(0,0) rotate(0); opacity: 1; transition: all .7s ease;}
.load_complate .layer .slogan { transition-delay: .2s }
.load_complate .layer .npc1 { transition-delay: .1s }
.load_complate .layer .mask { transition-delay: .2s }

.wraper .login{ width: 328px; height: 130px; position: absolute; top: 706px; left: 50%; margin-left: -164px; z-index: 10; text-align: center; color: #fff; font-size: 22px;}
.wraper .login::after{ content: ""; width: 100%; height: 53px; position: absolute; left: 0; bottom: -82px; background: url(../images/btn-jt.png) no-repeat center bottom; animation: move1 2s 0s infinite forwards;}
.wraper .login .btn-login{ width: 328px; height: 100px; line-height: 100px; display: block; position: absolute; left: 0; top: 0; background: url(../images/btn-login.png) no-repeat; font-size: 38px; font-weight: bold; color: #000;}
.wraper .login p{text-shadow: 1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000,1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000; font-weight: bold; margin-top: 100px;}
.wraper .login p a{ color: #fff; margin-left: 20px; }

.wraper .box{ width: 1200px; margin: 0 auto; color: #fff; font-size: 16px; margin-bottom: 75px; position: relative;}
.wraper .box1-1{ height: 927px; background: url(../images/bg1-box-1.png) no-repeat center top;}
.wraper .box1-2{ height: 1096px; background: url(../images/bg1-box-2.png) no-repeat center top;}
.wraper .box2-1{ height: 1121px; background: url(../images/bg2-box-1.png) no-repeat center top;}
.wraper .box2-2{ height: 754px; background: url(../images/bg2-box-2.png) no-repeat center top;}
.wraper .box2-3{ height: 936px; background: url(../images/bg2-box-3.png) no-repeat center top;}

.wraper .box1-1 .btn-gifts{ width: 210px; height: 44px; position: absolute; right: 45px; top: 86px; text-indent: -9999px; background: url(../images/btn-gifts.png) no-repeat center top;}
.wraper .box1-1 ul{ width: 530px; display: inline-block; margin: 296px 0 0 440px;}
.wraper .box1-1 ul li{ height: 133px; margin-bottom: 88px; display: flex; align-items: center;}
.wraper .box1-1 ul li p{ width: 365px; text-align: center; color: #000; text-shadow: 1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff; font-weight: bold; font-size: 18px;}
.wraper .box1-1 ul li p span{ color: #ff0600; }
.wraper .box1-1 ul li .btn{ width: 143px; height: 47px; line-height: 47px; display: inline-block; text-align: center; font-weight: bold; color: #000; font-size: 20px; background: url(../images/btn-1.png) no-repeat; text-shadow: 1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff; -webkit-filter: grayscale(100%);filter: grayscale(100%);}
.wraper .box1-1 ul li .btn.yes{ -webkit-filter: grayscale(0%);filter: grayscale(0%);}
.wraper .box1-1 ul li .btn.yes:hover{ filter: brightness(1.2)}
.wraper .box1-2 a{ width: 120px; height: 40px; display: inline-block; text-indent: -9999px; position: absolute; top: 1004px; right: 238px;}

.wraper .rule{ font-size: 22px; line-height: 47px; color: #e1e1e1; padding: 0 80px; box-sizing: border-box;}
.wraper .rule strong{ font-size: 26px; }
.wraper .rule a{ color: #e1e1e1; text-decoration: underline;}
.wraper .btnBox{ width: 1200px; height: 162px; margin-bottom: 5px; text-align: center; }
.wraper .btnBox a{ width: 600px; height: 162px; line-height: 154px; font-size: 32px; float: left; position: relative; -webkit-filter: grayscale(100%);filter: grayscale(100%);}
.wraper .btnBox a::after{ content: ""; width: 600px; height: 162px; position: absolute; left: 0; top: 0; background: url(../images/btn-nav.png) no-repeat center top;}
.wraper .btnBox a span{ position: relative; z-index: 1; font-size: 32px; color: #000; font-weight: bold;}
.wraper .btnBox a:nth-child(1):after{ transform: rotateY(180deg);}
.wraper .btnBox a.on{ -webkit-filter: grayscale(0%);filter: grayscale(0%);}
.wraper .conBox{ text-align: center; }
.wraper .conBox p{ font-size: 20px; margin-bottom: 20px;}
.wraper .conBox p span{ color: #d0d0d0; display: block; font-size: 16px;}
.wraper .conBox .inpBox .inp{ width: 660px; margin: 0 auto; height: 55px; position: relative;}
.wraper .conBox .inpBox input{ width: 520px; height: 42px; float: left; border: 3px solid #000; text-align: center; font-size: 20px; color: #585858; font-weight: bold;}
.wraper .conBox .inpBox .btn{ width: 154px; height: 42px; line-height: 42px; border: 3px solid #000; position: absolute; right: 0; top: 0; background: linear-gradient(to top, #ffc103 10%, #ff6f37 80%); font-size: 22px; color: #000; font-weight: bold; border-radius: 30px; -webkit-filter: grayscale(100%);filter: grayscale(100%);}
.wraper .conBox .inpBox .btn.yes{ -webkit-filter: grayscale(0%);filter: grayscale(0%);}
.wraper .conBox .inpBox .btn.yes:hover{ filter: brightness(1.2)}
.wraper .conBox .txt{ font-size: 27px; color: #ffb809; font-weight: bold; margin-top: 20px;}
.wraper .conBox .txt b{ font-size: 46px; color: #ff3c00;}

.wraper .copyBox{ width: 930px; position: absolute; left: 50%; top: 610px; margin-left: -465px; display: flex; justify-content: space-around;}
.wraper .copyBox .copy{ width: 465px; display: inline-block; text-align: center;}
.wraper .copyBox .copy p{ font-size: 20px; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000,1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;}
.wraper .copyBox .copy p span{ font-size: 28px; color: #ffbe10;}
.wraper .copyBox .copy .btn{ width: 143px; height: 47px; line-height: 47px; display: inline-block; text-align: center; font-weight: bold; color: #000; font-size: 20px; background: url(../images/btn-1.png) no-repeat; text-shadow: 1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff;}
.wraper .btn:hover{ filter: brightness(1.2)}


.popdiv{ width:816px; background: url(../images/pop-1.png) no-repeat; display:none; text-align: center; color: #fff; font-size: 24px; padding: 90px 0 50px 0;}
.popdiv .close{ width: 76px; height: 76px; position: absolute; top: 50px; right: 48px; display: block; text-indent: -9999px; cursor: pointer;}
.popdiv .pop { width: 100%; height: 100%; display: table; box-sizing: border-box;}
.popdiv .pop .popup { display: table-cell; vertical-align: middle; }
.popdiv .pop .popup strong { font-size: 32px; color: #ffcda1; line-height: 40px; margin-bottom: 20px; display: inline-block;}
.popdiv .pop .popup p { color: #fff; font-weight: bold; margin-bottom: 10px;}
.popdiv .pop .popup b{ font-size: 16px; line-height: 25px; display:block;}
.popdiv .pop .btn { width: 143px; height: 47px; line-height: 47px; display: inline-block; text-align: center; font-weight: bold; color: #000; font-size: 20px; background: url(../images/btn-1.png) center top / cover no-repeat; margin: 5px 10px 10px;}
.popdiv .pop .btn:hover { filter: brightness(1.3);}
.popdiv .pop .popup p,.popdiv .pop .popup b,.popdiv .pop .popup strong,.popdiv .pop .btn-link{text-shadow: 1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000,1px 1px 1px #000,-1px 1px 1px #000,1px -1px 1px #000,-1px -1px 1px #000;}
.popdiv .pop .btn-copy,.popdiv .pop .table thead{text-shadow: 1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff,-1px -1px 1px #fff;}
.popdiv .pop .btn-share,.wraper .conBox .btn-share{ width: 298px; height: 70px; line-height: 68px; display: block; margin: 30px auto 0; font-size: 27px; font-weight: bold; color: #000; background: url(../images/btn-share.png) no-repeat; padding-right: 23px; box-sizing: border-box;}
.popdiv .pop .btn-link { width: 300px; text-decoration: underline; background: none; color: #ffec13; font-size: 27px; font-weight: bold; margin-top: 20px;}
.popdiv .pop .btn-share{ text-shadow:none;}
.popdiv .pop .btn-copy{ width: 87px; height: 29px; line-height: 28px; font-size: 16px; margin-bottom: 0;}
.popdiv .pop .table{ width: 590px; margin: 0 auto; font-size: 20px;}
.popdiv .pop .table td{ border: 1px solid #000; color: #000; padding: 5px 15px;}
.popdiv .pop .table td span{ width: 180px; display: inline-block;}
.popdiv .pop .table thead{ color: #fff; font-weight: bold; }
#popmsg{ padding: 140px 0 90px 0;}



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