#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}
::-webkit-scrollbar{width: 5px;height: 5px;}
::-webkit-scrollbar-track{background-color: #000;}
::-webkit-scrollbar-thumb{background-color: #ccc;}

body{width:100%;background:#000;}

._wrap {width:100%;height: 1000px;min-width: 980px;position: relative;overflow: hidden;background: url(images/bg.jpg) no-repeat 50% 0px;}
._wrap.inGameWin {height:780px; background-position-y: -120px;}
._wrap .logo{width:135px;height: 50px;background: url(https://img1.tiancitycdn.com/csol/homepage/v7/images/logo.png) no-repeat 0 0; top:-115px;left:0;display: none;}
._wrap .main{width: 1000px;height:640px;position: absolute;top:170px;left:50%;margin-left: -500px; background:url(images/bg-con.png) no-repeat 40px 35px;}
.btn-close-page {background: url(images/sprite.png) no-repeat -156px 0px;width: 75px;height: 74px;top:206px;left:49%;margin-left: 414px;z-index:9999}
.btn-close-page:hover {filter: brightness(1.2)}
._wrap.inGameWin .main{top: 50px;}
._wrap.inGameWin .btn-close-page{top: 88px;}

.sprite {background: url(images/sprite.png) no-repeat 0 0;}
._wrap .main .slogan{ width: 211px; height: 87px; pointer-events:none; top: -3px;}
._wrap .main .slogan::before{display: block; width:60px; height:232px;  content:''; position: absolute;background:url(images/slogan1.png) no-repeat; top:24px; left:6px;}
._wrap .main .slogan::after{display: block; width: 100%; height: 100%;  content:''; position: absolute;background:url(images/slogan.png) no-repeat;}
.rCon{width: 630px; display: flex; left: 230px; justify-content: end;}
._wrap .main .btn-nav{display: block; width: 126px; height: 35px; line-height: 42px; text-align: center; box-sizing: border-box; padding-left:18px; font-size: 18px; color:#fff; font-weight: bold; text-shadow:1px 1px 1px #744b97;}
._wrap .main .logined-bar{font-size: 14px; color:#4b1a1a; text-shadow:none;background-position-y: -35px;}

._wrap .main .btn-nav:hover{filter:brightness(1.1);}
._wrap .main .tit{font-size: 16px; color:#775c96; margin-top: 17px; line-height: 30px; box-sizing: border-box; padding-left:270px; font-weight: bold;}
.myNameplate{background:url(images/r.png) no-repeat; width: 117px; height: 100px; box-sizing: border-box; right:0px;top:200px;}
.myNameplate p{height: 62px; line-height: 16px; text-align: center; font-size: 16px; color: #775c96; font-weight: bold; box-sizing: border-box; padding:18px 0px 7px 0px; display: flex; justify-content: center; align-items: center;}
.myNameplate a{display: block; width: 100px; height: 37px; margin:0 auto; text-indent: -999em;}
.con{width: 810px; height: 510px; box-sizing: border-box; padding-right:5px; margin:0 auto; left: -26px;overflow-y: auto;}
._wrap .main .con .con1{display: flex; justify-content: space-between;}
._wrap .main .con .con1 .c-left{width: 624px; height: 190px; display: flex; padding:13px 10px 0px 14px; background:url(images/eraseArea.png) no-repeat 0px 0px; justify-content: space-between; box-sizing: border-box;}
._wrap .main .con .con1 .c-left .eraseArea{width: 505px; height: 160px; overflow: hidden;}
._wrap .main .con .con1 .c-left .eraseArea::after{display: block; width:90px; height:90px;  content:''; position: absolute; border-radius:90px; top:36px; left:-63px; z-index:3;}
._wrap .main .con .con1 .c-left .eraseArea p{position: absolute; font-size: 14px; color:#3c3c3c; z-index: 3; width: 180px; left:calc(50% - 90px); text-align: center; bottom:-1px; height: 20px; line-height: 20px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text{width: 505px; height: 160px; display: none; background:url(images/gift0.png) no-repeat center;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text::after{display: block; width:239px; height: 111px; content:''; position: relative; background:url(images/gift.png) no-repeat; top:calc(50% - 60px);left:calc(50% - 238px/2);}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-1::after{background-position: 0 0;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-2::after{background-position: -239px 0;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-3::after{background-position: -478px 0;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-4::after{background-position: -717px 0;}

._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-5::after{background-position: 0 -111px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-6::after{background-position: -239px -111px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-7::after{background-position: -478px -111px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-8::after{background-position: -717px -111px;}

._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-9::after{background-position: 0px -222px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-10::after{background-position: -239px -222px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-11::after{background-position: -478px -222px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-12::after{background-position: -717px -222px;}

._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-13::after{background-position: 0 -333px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-14::after{background-position: -239px -333px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-15::after{background-position: -478px -333px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-16::after{background-position: -717px -333px;}

._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-17::after{background-position: 0 -444px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-18::after{background-position: -239px -444px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-19::after{background-position: -478px -444px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-20::after{background-position: -717px -444px;}

._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-21::after{background-position: 0 -555px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-22::after{background-position: -239px -555px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-23::after{background-position: -478px -555px;}
._wrap .main .con .con1 .c-left .eraseArea .prize-text.prize-24::after{background-position: -717px -555px;}

._wrap .main .con .con1 .c-left .eraseArea #guaCanvas {position: absolute;top: 0;left: 0;z-index: 2;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
._wrap .main .con .con1 .c-left .eraseArea p:last-child{display: none; position: absolute; top:0px; left:0px; pointer-events:none; width: 100%; height: 100%; justify-content: center; align-items: center; font-size: 28px; color:#fff; font-weight: bold; text-shadow: -2px -2px 2px #807c90,2px 2px 2px #807c90,2px -2px 2px #807c90,-2px 2px 2px #807c90,-2px -2px 2px #807c90,2px 2px 2px #807c90,2px -2px 2px #807c90,-2px 2px 2px #807c90;}
._wrap .main .con .con1 .c-left .eraseArea p:last-child.on{display: flex;}
._wrap .main .con .con1 .c-left .remaining{width: 90px; height: 160px; display: flex; justify-content: center; align-items: center; font-size: 20px; color:#ab5eb9; font-weight: bold;text-shadow: -2px -2px 2px #fff,2px 2px 2px #fff,2px -2px 2px #fff,-2px 2px 2px #fff,-2px -2px 2px #fff,2px 2px 2px #fff,2px -2px 2px #fff,-2px 2px 2px #fff; line-height: 22px; text-align: center;}
._wrap .main .con .con1 .c-right{width:160px; height: 182px; top: 4px; display: flex; align-content: space-between; flex-wrap:wrap;}
._wrap .main .con .con1 .c-right a{display: block; width: 154px; height: 58px; line-height: 58px; text-align: center; font-size: 16px; color: #ac5221; font-weight: bold; box-sizing: border-box; padding-left:22px; background:url(images/sprite.png) no-repeat -238px -76px;}
._wrap .main .con .con2{width: 780px; display: flex; justify-content: space-between;margin:0 auto;}
._wrap .main .con .con2 a{display: block; width: 250px; height: 83px; display: flex; justify-content: center; align-items: center; text-align: center; background:url(images/sprite.png) no-repeat 0px -139px; font-weight: bold; color:#be572a; font-size: 17px; line-height: 20px;}

._wrap .main .con .con3{width: 780px; display: flex; justify-content: space-between; margin:5px auto 0 auto;}
._wrap .main .con .con3 .c-left,._wrap .main .con .con3 .c-right{width: 383px; height: 181px;}
._wrap .main .con .con3 .c-left{background:url(images/c3-l.png) no-repeat;}
._wrap .main .con .con3 .c-left::before{display: block; width: 100%; height: 100%; content:''; position: absolute; background:url(images/c3-1.png) no-repeat center;}
._wrap .main .con .con3 .c-right{background:url(images/c3-r.png) no-repeat;}
._wrap .main .con .con3 .c-right .giftCon{width: 290px; height: 142px; overflow: hidden; margin:30px auto 0 auto;}
._wrap .main .con .con3 .c-right .giftCon li{background:url(images/c3-gift.png) no-repeat; width: 100%; height: 100%; background-position-x:center;}
._wrap .main .con .con3 .c-right .giftCon li:nth-child(4){background-position-y: 0;}
._wrap .main .con .con3 .c-right .giftCon li:nth-child(3){background-position-y: -142px;}
._wrap .main .con .con3 .c-right .giftCon li:nth-child(2){background-position-y: -284px;}
._wrap .main .con .con3 .c-right .giftCon li:nth-child(1){background-position-y: -426px;}
._wrap .main .con .con3 .c-right .giftCon li:nth-child(6){background-position-y: -568px;}
._wrap .main .con .con3 .c-right .giftCon li:nth-child(5){background-position-y: -710px;}
._wrap .main .con .con3 .c-right .prevBtn,._wrap .main .con .con3 .c-right .nextBtn{display: block; text-indent: -999em; background:url(images/sprite.png) no-repeat; background-position-y: -76px; height: 41px; width: 29px; top:calc(50% - 14px); position: absolute;}
._wrap .main .con .con3 .c-right .prevBtn{background-position-x: 0; left:10px;}
._wrap .main .con .con3 .c-right .nextBtn{background-position-x: -29px; right: 10px;}
._wrap .main .con .con4{margin:6px auto 0 auto; background:url(images/c4.png) no-repeat; box-sizing: border-box; padding-top:37px; width: 688px; height: 209px; display: flex;}
._wrap .main .con .con4 .c-left{width: 500px; height: 100%; box-sizing: border-box; padding:16px 0px 0px 45px; z-index: 1;}
._wrap .main .con .con4 .c-left .c-top{background:url(images/c4-top.png) no-repeat; width: 438px; height: 36px; display: flex; box-sizing: border-box; padding:0px 15px 0px 10px; justify-content: space-between; align-items: center; font-size: 15px; color:#fff; font-weight: bold;}
._wrap .main .con .con4 .c-left .j{line-height: 24px; color:#371e5e; font-size: 15px; font-weight: 600; margin-top: 3px;}
._wrap .main .con .con4 .c-left .tips{line-height: 24px; color:#556cdf; font-size: 15px; font-weight: 600; margin-top: 5px; display: flex;}
._wrap .main .con .con4 .c-left .tips a{text-decoration: underline; color:#556cdf; display: flex; align-items: center; position: relative;}
._wrap .main .con .con4 .c-left .tips a::after{display: inline-block; width: 15px; height: 14px; content:''; background:url(images/sprite.png) no-repeat -250px 0px; position: relative; margin:0px 3px;}
._wrap .main .con .con4 .c-left .tips a div{position: absolute; font-size:12px; color:#371e5e; border-radius:50px; border:3px solid #fff; background: #e0e1ff; position: absolute; width: 270px; height: 90px; top: -90px; left:calc(50% - 135px); box-sizing: border-box; display: none; justify-content: center; align-items: center; padding-left: 5px; line-height: 20px;}
._wrap .main .con .con4 .c-left .tips a:hover div{display: flex;}

._wrap .main .con .con4 .c-right{background:url(images/c4-r.png) no-repeat center; width: 150px; height: 100%;}

._wrap .main .con .con5 a{display: block; background:url(images/sprite.png) no-repeat -63px -76px; width: 175px; height: 57px; margin:5px auto 0 auto; text-indent: -999em;}

.pop {width:432px;height:214px;background: url(images/pop.png) no-repeat 0 0;box-sizing: border-box;padding:40px 30px 30px 30px; display: none;
    /* display: block;
    position: relative !important;
    display: block !important;
    opacity:1 !important;
    transform:scale(1) !important; left: 0 !important; */
}
.pop .btn_close {position: absolute;right: -30px;top: 0px;text-indent:-999em; background: url(images/sprite.png) no-repeat -279px 0px;width: 72px;height: 70px;}

.pop-bind {background: url(images/pop-bind.png) no-repeat 0 0;height:297px;}
.pop-bind h4{font-size: 24px; font-weight: bold; color: #6a559b; text-align: center;}
.pop-bind .tips{width: 100%; text-align: center; font-size: 14px; color:#686767; margin:10px auto;}
.pop-bind .radio-box {
    width: 310px;
    line-height: 32px;
    outline: none;
    position: relative;
    top: 0px;
    left: calc(50% - 310px / 2);
    color: #5b4d8f;
    text-align: center;
    font-size: 18px;
    border: 0 none;
    /* padding: 10px 0px; */
}
.pop-bind .radio-box input[type="radio"] {
    width:18px;
    height:18px;
    vertical-align: middle;
    margin-right: 5px;
}
.pop p {
    height: 100%;
    width: 100%;
    text-align: center;
    color: #5b4d8f;
    font-size: 18px;
    line-height:30px;
    font-weight: bold; display: flex; justify-content: center; align-items: center;
}


.pop .btns {width: 320px;height:57px;left:calc(50% - 320px/2);position: relative;display: flex;justify-content: center; display: flex; justify-content: space-between;}
.pop .btns a {width: 145px; height: 57px; display: block;background-image: url(images/sprite.png);background-repeat: no-repeat; margin:0 auto;}
.pop .btns .btn-confirm{background-position-y:-286px;}
.pop .btns .btn-cancel{background-position:-145px -286px;}

.pop-bind .btns .btn-confirm{background-position-y: -229px;width:175px;height:57px;}
.pop .btns .btn-nameplate{background-position:-175px -229px;width:175px;height:57px;}

.pop .btns .btn-share{background-position:-291px -286px; width: 175px;}

.pop-reconfirm p{height: 50%;}

.pop-nameplate{background:url(images/pop-nameplate.png) no-repeat; height: 244px;}
.pop-nameplate p{height: 65%;}

.pop-exchange{background:url(images/pop-exchange.png) no-repeat; height: 397px;}
.pop-exchange h4{font-size:18px; font-weight: bold; color: #6a559b; text-align: center;}
.pop-exchange .btns{display: flex; justify-content: space-between; flex-wrap:wrap; height: 260px; margin-top: 20px;}
.pop-exchange .btns a{width: 250px; height: 83px; background: url(images/sprite.png) no-repeat 0px -343px;display: flex;justify-content: center;align-items: center;text-align: center;font-weight: bold;color: #be572a;font-size: 17px;line-height: 20px;}


.pop-10Pull{background:url(images/pop-h.png) no-repeat; height: 482px;}
.pop-10Pull h4{font-size:18px; font-weight: bold; color: #6a559b; text-align: center;}
.pop-10Pull ul{width: 100%; margin-top: 20px;}
.pop-10Pull ul li{width: 100%; text-align: center; font-size: 18px; color:#6a559b;}


.pop-warehouse,.pop-gifts{background: url(images/pop-bind.png) no-repeat 0 0;height:297px;}
.pop-warehouse h4,.pop-gifts h4{font-size:24px; font-weight: bold; color: #6a559b; text-align: center;}
.pop-warehouse .myTit,.pop-gifts .myTit{width: 100%; height: 38px; box-sizing: border-box;font-weight: 600;}
.pop-warehouse .myTit td,.pop-gifts .myTit td{ line-height: 38px; text-align: center; font-size:18px; color:#5b4d8f;}
.pop-warehouse .listBox,.pop-gifts .listBox{box-sizing: border-box; width: 100%; height:156px; overflow-y:auto;}
.pop-warehouse .listBox table,.pop-gifts .listBox table{width: 100%;}
.pop-warehouse .listBox td,.pop-gifts .listBox td{ line-height: 26px; text-align: center; font-size:16px; color:#494949;}
.pop-share h4{font-size:24px; font-weight: bold; color: #6a559b; text-align: center;}
.pop-share .shareUrl{width: 320px; height: 32px; background:#edf1ff; border:1px solid #5b4d8f; border-radius:32px; margin:10px auto; overflow: hidden; text-align: center; line-height: 32px;  overflow: hidden;text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box; padding:0px 10px;}

.pop-rules {background-image: url(images/pop-exchange.png); height: 397px; padding:40px 30px 30px 30px;}
.pop-rules p {overflow-y:auto; font-size: 16px; text-align: left; display: block;}
/* .pop-rules p span {font-size: 18px;} */

.pageTop {display: none;}
.copyRight {display: none;}
.large {padding-top:40px;min-width: 1200px;}
.large .logo {display: block;}
.large .pageTop {display: block;}
.large .btn-close-page {display: none;}
.large ._wrap {min-width: 1200px;}
.large .copyRight {display: block;}


::-webkit-scrollbar
{
    width: 8px;
    height: 5px;
}
 
::-webkit-scrollbar-track
{
    background-color: #fff; border-radius:5px; border:2px solid #ecd7ff;
}
 
::-webkit-scrollbar-thumb
{
    background-color: #a871dc; border-radius:5px;
}



.pageTop {display: none;}
.copyRight {display: none;}
.large {padding-top:40px;min-width: 1200px;}
.large .logo {display: block;}
.large .pageTop {display: block;}
.large .btn-close-page {display: none;}
.large ._wrap {min-width: 1200px;height:1000px; background-position-y:0px;}
.large ._wrap .main {top:170px;}
.large .copyRight {display: block;}