body{letter-spacing: 1px; font: 14px Microsoft YaHei Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif; margin: 1px 0 0 0 !important; padding: 80px 0 0 0 !important; background: linear-gradient(#e7e2f8,#f5f5f5) no-repeat;background-size: 100%}
div{box-sizing: border-box}
.v-box{ width: 1200px; height: auto; border-radius: 10px; margin: auto; position: relative; padding-top: 1px; background-color: #fff}
.v-box2{ width: 1200px; height: auto; border-radius: 10px; margin: auto; position: relative; padding: 20px; background-color: #fff}
.v-box2-float-assist{width: 1180px; height: auto; margin-left: -20px;}
.box_assist{width: 1180px; margin-left: -20px;}
.flex{ display: flex}
.left{ float: left}
.right{ float: right}
.red{ color: #e60f0f}
.purple{ color: #682ae1}
.cheng{color: #f6a046}
.pink{ color: #de8fd7}
.bg_purple{ background-color: #682ae1}
.color999{ color: #999}
.color666{ color: #666}
.color333{ color: #333}
a{text-decoration:none;}
a:hover{ text-decoration: none; }
.animation{-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }
.clearBox::after {content: "";display: table;clear: both;}
.font15{font-size: 15px}
.font16{font-size: 16px}
.font18{font-size: 18px}
.font22{font-size: 22px}
.font30{font-size: 30px}
.font_bold{font-weight: bold}
.gap_right20{ margin-right: 20px}
.cur{cursor: pointer}
.color_out{filter: grayscale(100%);}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type="number"] {-moz-appearance: textfield;}

.lazy{ object-fit: cover}
.msgBox{width: 160px; height: 32px; line-height: 32px; text-align: center; color: #fff; background: rgba(0,0,0,.7); position: fixed; top: 50%; left: 50%; margin-top: -16px; margin-left: -80px; border-radius: 6px; display: none}
.layui-laypage a:hover{color: #682ae1 !important;}
.full_box{width: 100%; height: auto; background-color: #fff;border-radius: 10px; padding: 20px;}
.title_has_ico{width: 100%; height: 30px; line-height: 30px; color: #333; font-size: 16px; position: relative; padding-left: 30px; font-weight: bold; letter-spacing: 2px; margin-bottom: 20px;}
.title_has_ico img{width: 24px; height: 24px; position: absolute; left: 0; top: 3px;}

/*top*/
.top{width: 100%; height: 80px; background-color: #fff; position: fixed; left: 0; top: 0; z-index: 10; box-shadow: 0 2px 4px #dedede}
nav{ width: 650px; height: 80px;}
.nav_a{display: inline-block; line-height: 80px; font-size: 16px; color: #333; padding-right: 30px; font-weight: 600;}
.nav_a:hover{ color: #682ae1;}
.search{width: 500px; height: 50px; border:solid 1px #8f58fd; border-radius: 25px; margin:14px 40px 0 0; padding: 0 0 0 30px}
.game_switch{ width: 100px; line-height: 18px; border-right: solid 1px #e5e5e5; font-size: 14px; margin-top: 16px; position: relative; padding-right: 14px; cursor: pointer}
.game_switch_icon{ width: 14px; height: 14px; position: absolute; right: 15px; top: 2px}
.search_input{ width: 200px; height: 18px; margin: 16px 0 0 15px; border:none; font-size: 14px;}
.search_input:focus{outline: none;}
.search_input::placeholder{ color: #cfcfcf; font-size: 14px; letter-spacing: 1px}
.search_btn{width: 80px; height: 40px; color: #fff; border-radius: 20px; margin: 5px 5px 0 0; font-size: 16px; letter-spacing: 8px;
     line-height: 40px; background: linear-gradient(to right, #9c77fe, #8c53fd); text-align: center; padding-left: 8px;
}
.search_btn:hover{background: #ffa400; cursor: pointer}
.top_logo{ width: 258px; height: 80px; position: absolute; left: -258px; top: 0}
.top-use{ width: 310px; height: 50px; position: absolute; right: -320px; top: 15px}
.top-use-one{display: block; width: 50px; height: 50px; text-align: center;}
.top-use-one2{display: block; width: 160px; height: auto; position: relative}
.top-use-one2:hover .top-member-menu{display: block}
.top-use-img{ width: 50px; height: 30px; text-align: center}
.top-use-img img{ width: 30px; height: 30px;}
.top-member-head{ width: 40px; height: 40px; border-radius: 20px; cursor: pointer; margin: 5px;display: block}
.top-member-menu{ width: 160px; height: auto;background: #fff; position: absolute; left: 0; top: 50px; border-radius: 10px; padding: 10px; display: none}
.top-member-menu-one{width: 100%; height: 30px; line-height: 30px; color: #999; cursor: pointer}
.top-member-menu-one:hover{ color: #682ae1}
.top-member-menu-two{width: 100%; height: 30px; line-height: 30px; color: #682ae1; border-bottom: dotted 1px #999}
.top-use-txt{ display: block; width: 50px; height: 20px; line-height: 20px; text-align: center; color: #999999; font-size: 13px}
.top-use-one:hover .top-use-txt{color: #682ae1}
.top-use-one:hover .top-use-img{animation: jump 0.3s 2;}
.top_game_box{width: 1200px; height: auto; padding: 20px; background: #fff; margin: 78px auto 0 auto; border-radius: 0 0 10px 10px; position: relative; z-index: 10; display: none; box-shadow: 1px 1px 6px #9c78fe}
.top_game_box::after{content: '';position: absolute;left: 0;top: -4px;width: 100%; height: 4px;background-color: #fff}
.top_game_one{width: 290px; height: 50px; float: left; margin-bottom: 10px; position: relative; padding-left: 60px; line-height: 50px; font-size: 15px; color: #666; cursor: pointer}
.top_game_ico{width: 50px; height: 50px; border-radius: 5px; position: absolute; left: 0;top: 0}
.top_game_one:hover{ color: #682ae1}
.top_game_one:hover img{transform: scale(1.1); box-shadow: 1px 2px 8px #ffa400}

/*first-box*/
.first-box{ margin-top: 20px; padding: 20px; position: relative}
.games-box{ width: 280px; height: 400px; background: linear-gradient(135deg, #fff5e5, #ffffff); border-radius: 10px; padding: 20px 20px 0 20px; overflow-y: auto; overflow-x: hidden}
.games-box-one{ width: 240px; height: 46px; margin-bottom: 20px; position: relative; cursor: pointer; display: block}
.games-box-one-img{width: 46px; height: 46px; margin-right: 20px; position: absolute; left: 0; top: 0}
.games-box-one-info{width: 174px; height: 46px;}
.games-box-one-info-name{width: 100%; height: 26px; line-height: 26px; font-size: 15px; font-weight: 600}
.games-box-one-info-tag{width: 100%; height: 20px; line-height: 20px; font-size: 14px; color: #888888; overflow: hidden}
.games-box-one-info-tag span{margin-right: 10px;}
.games-box-one:hover .games-box-one-img{ transform: scale(1.2); box-shadow: 1px 2px 8px #ffa400}
.games-box-one:hover .games-box-one-info-name{color: #682ae1}

/*first-right-box*/
.first-right-box{ width: 260px; height: 400px;}
.first-right-one{ width: 100%; height: 200px; background: linear-gradient(135deg, #ede2f2, #ffffff); border-radius: 10px; padding: 20px; position: relative }
.first-right-one-row{ width: 100%; height: 56px; overflow: hidden}
.first-right-one-row-head{ width: 50px; height: 50px; border-radius: 25px; display: block; margin-top: 3px}
.first-right-one-row-txt{ width: 164px; height: 56px; padding: 8px 0 8px 0 }
.first-right-one-row-h1{ font-size: 16px; font-weight: 500; letter-spacing: 1px; line-height: 22px}
.first-right-one-row-h2{font-size: 13px; color: #999999; letter-spacing: 1px; line-height: 18px}
.first-right-one-row-h2 a{color: #ff9a00}
.first-right-one-card-h{width: 100px; height: 80px; background-color: #ffefd4; border-radius: 10px; position: absolute; left: 20px; top: 106px; padding-top: 20px; cursor: pointer}
.h-img{width: 40px; height: 30px; position: absolute; left: 30px; top: -15px;}
.card-txt{width: 100%; height: 26px; line-height: 26px; text-align: center; font-size: 16px;}
.h-btn{width: 30px; height: 16px; border-radius: 8px; background-color: #ffa400; font-size: 12px; color: #fff; text-align: center; line-height: 16px; margin: 5px auto}
.first-right-one-card-h:hover{ width: 110px; box-shadow: 1px 2px 8px #ffa400}
.first-right-one-card-h:hover .h-img{ left: 35px;}
.first-right-one-card-h:hover .h-btn{width: 80px;}
.first-right-one-card-z{width: 100px; height: 80px; background-color: #efebfe; border-radius: 10px; position: absolute; right: 20px; top: 106px; padding-top: 20px; cursor: pointer}
.z-img{width: 43px; height: 34px; position: absolute; left: 28px; top: -17px;}
.z-btn{width: 30px; height: 16px; border-radius: 8px; background-color: #636dcf; font-size: 12px; color: #fff; text-align: center; line-height: 16px; margin: 5px auto}
.first-right-one-card-z:hover{ width: 110px; box-shadow: 1px 2px 8px #682ae1}
.first-right-one-card-z:hover .z-img{ left: 33px;}
.first-right-one-card-z:hover .z-btn{width: 80px;}
.first-right-one:nth-child(2){ height: 180px; margin-top: 20px}
.first-right-one-title{width: 100%; height: 26px; line-height: 26px; overflow: hidden; padding-left: 30px; position: relative; font-size: 16px; font-weight: 500; letter-spacing: 1px; margin-bottom: 12px;}
.first-right-one-title-ico{width: 22px; height: 22px; position: absolute; left: 0; top: 2px;}
.first-right-one-title a{ font-size: 13px; color: #999; float: right}
.first-right-one-link{width: 100%; height: 28px; font-weight: 500; line-height: 28px; overflow: hidden; font-size: 14px; padding-left: 20px; display: block; box-sizing: border-box;white-space: nowrap;text-overflow: ellipsis; position: relative}
.first-right-one-link span{width: 4px; height: 4px; border-radius: 2px; background-color: #999; display: block; position: absolute; top: 12px; left: 0}
.first-right-one-link:hover{ color: #682ae1;}

/*advert*/
.advert{width: 1220px; height: 160px; margin: 20px auto; overflow: hidden; position: relative; left: -10px;}
.advert-one{width: 285px; height: 160px; float: left; margin-left: 20px; border-radius: 10px; position: relative; padding-left: 30px;}
.advert-one:nth-child(1){background: linear-gradient(135deg, #fff2dd, #ffffff);}
.advert-one:nth-child(2){background: linear-gradient(135deg, #ffdee5, #ffffff);}
.advert-one:nth-child(3){background: linear-gradient(135deg, #f3d4ff, #ffffff);}
.advert-one:nth-child(4){background: linear-gradient(135deg, #e2e5ff, #ffffff);}
.advert-one-img{width: 110px; height: 126px; position: absolute; right: 0; /*top: 17px;*/ bottom: 0}
.advert-one-h1{ width: 120px; height: 30px; line-height: 30px; font-size: 22px; font-weight: 600; margin: 20px 0 10px 0; letter-spacing: 1px}
.advert-one-h2{ width: 120px; height: 20px; line-height: 20px; font-size: 14px; color: #666;}
.advert-one-link{width: 75px; height: 24px; line-height: 24px; border-radius: 12px; background-color: #323332; color: #ffdfaa; text-align: center; font-size: 13px; margin-top: 10px; display: block}
.advert-one:hover{box-shadow: 2px 2px 8px #ffdfaa}
.advert-one:hover .advert-one-img{ width: 140px; height: 160px; bottom: 0}
.advert-one:hover .advert-one-h1{color: #682ae1}
.advert-one:hover .advert-one-h2{ margin-left: 20px}
.advert-one:hover .advert-one-link{width: 120px; background-color: #682ae1; color: #fff}

/*three-box*/
.three-box{width: 1200px; height: 62px; background: linear-gradient(60deg, #f0e9ff, #ffffff); margin: 20px auto; border-radius: 10px}
.three-box-img{width: 40px; height: 37px; margin: 12px 30px 13px 40px}
.three-box-txt{ width: 272px; height: 62px; line-height: 62px; text-align: center; font-size: 14px; color: #555555; letter-spacing: 1px}
.three-box-txt span{font-size: 24px; color: #9253c6; margin: 0 10px 0 10px; font-weight: 600; /*animation: numberTick 0.5s infinite;*/}

/*four-box*/
.four-box{padding: 20px 20px 0 20px}
.four-box-title{ width: 100%; height: 40px; overflow: hidden; position: relative}
.box-title-name{ width: 100px; height: 40px; font-size: 22px; font-weight: 600; color: #333; position: relative; padding-top: 5px; letter-spacing: 0}
.box-title-name::after{content: url("../img/ico5.png"); width: 84px; height: 15px; position: absolute; bottom: 5px; right: 1px}
.game-names-box{ width: 720px; height: 40px; border-radius: 20px; background-color: #f7f7f7; margin: auto;}
.game-names-box-one{width: 140px; height: 40px; line-height: 40px; text-align: center; border-radius: 20px; float: left; cursor: pointer; font-size: 16px}
.name-on{ background: linear-gradient(to right, #8d54fd, #9b75fe); color: #fff}
.box-more{font-size: 14px; color: #999; width: 100px; height: 40px; line-height: 40px; text-align: right; position: absolute; right: 0; top: 0; cursor: pointer}
.box-title-btn{ width: 120px; height: 40px; position: absolute; right: 0; top: 0;}
.title-btn-one{ width: 40px; height: 40px; border-radius: 20px; background-color: #f7f7f7; position: relative; float: left; margin-left: 20px; cursor: pointer}
.title-btn-one img{width: 7px; height: 11px; position: absolute; left: 16px; top: 14px;}
.title-btn-one:hover{background-color: #e8dffb}
.top-goods-box{width: 1180px; margin: 20px auto 0 auto; position: relative; left: -20px}
.top-goods-list{width: 100%; position: relative}
.top-goods-list::after{content: '';display: block;clear: both; height: 0}
.top-goods-one{ width: 275px; height: 280px; float: left; margin: 0 0 20px 20px; display: block; overflow: hidden; position: relative}
.top-cover-box{width: 100%; height: 157px;border-radius: 10px; overflow: hidden}
.top-goods-cover{width: 100%; height: 157px; object-fit: cover; border-radius: 10px;}
.top-goods-title{width: 100%; height: 60px; line-height: 20px; margin-top: 5px; font-size: 14px; color: #333; font-weight: 600; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.top-goods-h2{width: 100%; height: 30px; line-height: 30px; position: relative; text-align: right; font-size: 13px; color: #999}
.top-h2-ico{ width: 82px; height: 21px; position: absolute; left: 0; top: 4px;}
.top-goods-price{ width: 120px; height: 30px; color: #e60f0f; font-size: 22px; font-weight: 600; position: absolute; left: 0; bottom: 0;}
.top-goods-price span{ font-size: 14px;}
.top-goods-tag{ width: 56px; height: 20px; line-height: 20px; border-radius: 4px; background-color: #111; font-size: 14px; color: #ffedcf; text-align: center; position: absolute; left: 10px; top: 10px; }
.top-goods-one:hover .top-goods-title{color: #682ae1}
.top-goods-one:hover .top-goods-cover{ transform: scale(1.2);}

/*five-box*/
.five-box{ padding: 20px; margin-top: 20px}
.anchor_box{ width: 100%; height: 170px; overflow: hidden;white-space: nowrap; margin-top: 20px}
.anchor_one{ width: 280px; height: 170px; margin-right: 20px; display: block;border-radius: 10px; overflow: hidden; position: relative}
.anchor_cover{ width: 280px; height: 170px; display: block; position: absolute; left: 0; top: 0; z-index: 50}
.play_btn{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 90; background-color: rgba(0,0,0,0);}
.play_btn img{ width: 60px !important; height: 60px !important; display: none !important; margin: 55px auto;}
.anchor_one:hover .anchor_cover{ transform: scale(1.2);}
.anchor_one:hover .play_btn{background-color: rgba(0,0,0,.7);}
.anchor_one:hover .play_btn img{display: block !important;}

/*six-box*/
.six-box{padding: 20px; margin-top: 20px;}
.six-box-bu{width: 1180px; position: relative; left: -20px}
.six-box-bu::after{content: '';display: block;clear: both; height: 0}
.six-box-one{ width: 275px; height: 60px; float: left; margin-left: 20px; overflow: hidden; position: relative; padding-left: 80px; cursor: pointer}
.six-box-one img{ width: 60px; height: 60px; position: absolute; left: 0; top: 0}
.six-box-h2{ width: 100%; height: 30px; line-height: 36px; font-size: 16px; color: #333; font-weight: 600}
.six-box-h3{ width: 100%; height: 30px; line-height: 26px; color: #999}
.six-box-one:hover .six-box-img{ transform: rotate(360deg)}

/*footer*/
.footer{ width: 100%; background-color: #fff; margin-top: 20px; padding: 20px 0 20px 0;}
.footer-box{position: relative}
.footer-ico-box{ width: 100%; height: 70px; padding: 20px 0 0 224px}
.footer-ico-one{ width: 128px; height: 40px; margin-right: 20px;}
.footer-ico-logo{ width: 204px; height: 70px; position: absolute; left: 0; top: 0}
.footer-link-box{ width: 100%; height: 60px;}
.footer-link-one{ color: #666; line-height: 60px; display: inline-block; margin-right: 20px;}
.footer-link-one:hover{color: #682ae1;}
.footer-txt-h2{ width: 100%; line-height: 30px; color: #999}
.footer-txt-h2 span{margin-right: 20px; position: relative}
.footer-txt-h2 span img{position: absolute; top: 1px;}
.footer-code-box{width: 300px; height: 160px; position: absolute; right: 0; bottom: 30px}
.footer-code-one{ width: 130px; height: 160px; float: right; margin-left: 20px; line-height: 30px; color: #555; text-align: center}
.footer-code-img{width: 130px; height: 130px; display: block}

/*down-code*/
.down-code{ width: 140px; height: 200px; margin: auto; background-color: #fff; border-radius: 10px; position: fixed; left: 1380px; right: 0;  top: 100px; padding: 5px}
.down-code-img{width: 130px; height: 130px;}
.down-code-h2{width: 100%; line-height: 26px; color: #555; text-align: center; font-size: 13px}
.down-code-h3{width: 100%; line-height: 26px; color: #682ae1; text-align: center; font-size: 11px}

/*aside*/
.aside{width: 90px; height: 600px; border-radius: 10px;background-color: #fff; position: fixed; right: 20px; top: 50%; margin-top: -300px; padding-top: 23px;}
.aside-one{ width: 100%; height: 60px; position: relative; padding-top: 40px; margin-bottom: 22px; display: block; cursor: pointer}
.aside-one-img{ width: 30px; height: 30px; position: absolute; left: 0; right: 0; top: 5px; margin: auto;}
.aside-one-txt{ width: 100%; line-height: 20px; text-align: center; -webkit-transition: color 0.5s; -moz-transition: color 0.5s; -o-transition: color 0.5s; transition: color 0.5s;}
.aside-one:hover .aside-one-txt{ color: #682ae1}
.aside-one:hover .aside-one-img{ animation: jump 0.3s 2;}

/*logo*/
.full-background{position: fixed; left: 0;top: 0; width: 100%; height: 100%; background: #f7f7f7 url("../img/bg1.jpg") no-repeat; background-size: 100% 100%}
.login-body{width: 1200px; height: 100%; margin: auto; padding: 60px 0 90px 0}
.login-logo{width: 154px; height: 52px; display: block}
.login-body-box{width: 1200px; height: 565px; background: #682ae1; margin: 100px auto 0 auto;position: relative; background: url("../img/login_img.png") no-repeat; background-size: 654px 565px;}
.login-form-box{width: 460px; height: auto;float: right; background: linear-gradient(#fdf7ff,#ffffff); border-radius: 30px; border:solid 3px #fff; padding-bottom: 26px}
.login-footer{width: 1200px; height: 120px; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; text-align: center}
.login-tag-box{width: 100%; height: 80px; padding-top: 30px; position: relative}
.login-one-tag{font-size: 18px; line-height: 30px; width: 226px; height: 30px; float: left; text-align: center; color: #666666; cursor: pointer}
.login-tag-box .on{font-weight: 500; color: #333}
.login-one-item{width: 25px; height: 4px; border-radius: 2px; background-color: #682ae1; position: absolute; top: 63px; left: 100px;}
.login-tag-card{ width: 100%; height: auto; margin-top: 20px}
.login-input{width: 397px; height: 50px; border-radius: 12px; border: solid 1px #f7f7f7; margin: 0 auto 16px auto; background-color: #f7f7f7; display: block; padding-left: 18px; box-sizing: border-box}
.login-input:focus{background-color: #fff; border: solid 1px #6367fd;outline: none;}
.login-input::placeholder{ color: #999; font-size: 15px; letter-spacing: 1px; line-height: 50px;}
.login-card{width: 100%; height: auto; position: relative}
.get-verify{width: 90px; height: 40px; text-align: center; font-size: 15px; line-height: 40px; font-weight: 500; position: absolute; right: 40px; top: 5px; color: #682ae1; cursor: pointer}
.login-txt-link{ width: 397px;height: 50px; margin: 0 auto 20px auto}
.login-txt-link a{line-height: 50px; color: #999; font-size: 15px;}
.login-txt-link a:hover{color: #682ae1}
.login-button{width: 397px; height: 50px; line-height: 50px; margin: auto;color: #fff; background: linear-gradient(to right,#9c78fe,#682ae1); text-align: center; font-size: 16px; border-radius: 12px; cursor: pointer}
.login-button:hover{background: linear-gradient(to right,rgb(255, 202, 135),rgb(232, 127, 172)); box-shadow: 1px 1px 6px rgb(255, 202, 135)}
.login-form-title{width: 397px; height: 50px; line-height: 50px; margin: 10px auto 0 auto; font-size: 20px; color: #333; font-weight: 600;}
.login-form-title span{ float: right; font-size: 16px; color: #666; font-weight: 500}
.login-form-title span a{color: #682ae1}
.form-pact{ width: 397px; height: 20px; line-height: 20px; margin: 20px auto 0 auto; position: relative; padding-left: 26px;}
.pact-icon{ width: 20px; height: 20px; display: block; position: absolute; left: 0; top: 0; cursor: pointer}
.form-pact a{color: #682ae1}

/*footstep*/
.footstep{width: 1200px; height: 50px; margin: auto;}
.footstep a{line-height: 50px; font-size: 15px; color: #666; margin-right: 6px}
.footstep .on{ color: #682ae1}
.footstep a:not(:last-child)::after {content: "/"; margin-left: 15px;}

/*hot_game*/
.hot_game_ico{width: 125px; height: 30px; display: block; margin-bottom: 20px;}
.game_list_one{width: 95px; margin-left: 20px; margin-right: 18px; display: block; float: left;}
.game_list_one:nth-child(9){margin-right: 0}
.game_list_img{ width: 75px; height: 75px; display: block; position: relative; margin-left: 10px;}
.game_list_name{width: 100%; height: 52px; line-height: 20px; font-size: 15px; color: #565656; margin: 10px auto; text-align: center;}
.game_list_one:hover .game_list_img{transform: scale(1.1)}
.game_list_one:hover .game_list_name{color: #682ae1;}

/*search_box*/
.search_box{width: 100%; height: 50px; position: relative}
.search_box .on{color: #682ae1; text-shadow: 1px 0 1px #682ae1}
.search_type{width: 100px; height: 50px; line-height: 50px; text-align: center; color: #666; font-size: 18px; float: left; cursor: pointer}
.img_xie{width: 20px; height: 20px; display: block; float: left; margin-top: 12px}
.search_input2{ width: 290px; height: 50px; border:none; font-size: 15px; float: right; background-color: #f7f7f7; border-radius: 25px; padding-left: 20px}
.search_input2:focus{outline: none; width: 350px;}
.search_input2::placeholder{ color: #999; font-size: 15px; letter-spacing: 1px}
.search_btn2{width: 85px; height: 50px; border-radius: 25px; position: absolute; right: 0; top: 0;line-height: 40px; background: linear-gradient(to right, #9c77fe, #8c53fd); cursor: pointer}
.search_btn2 img{ width: 25px; height: 25px; display: block; position: absolute; left: 30px; top: 12px;}
.search_mark{ width: 28px; height: 6px; border-radius: 3px; background-color: #682ae1; position: absolute; left: 36px; top: 40px;}
.search_btn2:hover{background: #ffa400}

/*letter_box*/
.letter_box{width: 100%;height: 50px; border-radius: 25px; background-color: #f7f7f7; margin: 30px auto; padding-left: 25px;}
.letter_box2{ width: 100%;height: 50px;border-radius: 25px;background-color: #f7f7f7;margin: 0 auto 30px auto;padding-left: 25px;}
.letter_one,.letter_two,.letter_three{line-height: 50px; display: inline; font-size: 16px; color: #999; padding: 10px 9px; cursor: pointer}
.letter_box .on,.letter_box2 .on{ color: #682ae1}

/*last_browse*/
.last_browse{ border-bottom: solid 1px #e6e6e6; margin-bottom: 20px}
.browse_title{ width: 100%; height: 20px; line-height: 20px; font-size: 16px; color: #333; font-weight: 600; margin-bottom: 20px}

/*list_game_info*/
.list_game_info{width: 100%; height: 75px; position: relative; padding-left: 95px; margin-bottom: 20px}
.game_info_logo{width: 75px; height: 75px; border-radius: 15px; position: absolute; left: 0; top: 0;}
.game_info_name{width: 100%; line-height: 50px; font-size: 24px; color: #333; font-weight: 600; letter-spacing: 2px}
.game_info_txt{width: 100%; line-height: 20px; font-size: 16px; color: #999}

/*condition_box*/
.condition_box{ width: 100%; height: 50px; min-height: 50px; overflow: hidden; border-bottom: dotted 1px #999; padding: 10px 10px 0 120px; position: relative}
.condition_name{width: 120px; height: 30px; line-height: 30px; font-size: 15px; color: #333; position: absolute; left: 0; top: 10px; font-weight: 600; text-align: justify;text-justify: distribute; padding-right: 20px}
.condition_name:after{content: '';display: inline-block;width: 100%;}
.condition_one,.condition_two{display: inline-block; width: 100px; height: 30px; overflow: hidden; line-height: 30px; text-align: center; font-size: 15px; color: #555; cursor: pointer; margin: 0 15px 15px 0}
.condition_select{ border: solid 1px #682ae1; color: #682ae1; background-color: #f0e9fc; border-radius: 4px}
.condition_unfold{ width: 62px; height: 30px; line-height: 30px; position: absolute; right: 0; top: 10px; border-radius: 4px; border: solid 1px #999; text-align: center; padding-right: 16px; cursor: pointer; color: #333; font-weight: 600}
.unfold_img{width: 14px; height: 14px; display: block; position: absolute; right: 7px; top: 8px}
.condition_box2{ width: 33%; height: 50px; min-height: 50px; padding: 0 0 0 80px; position: relative; float: left; margin-bottom: 15px;}
.condition_name2{width: 80px; height: 30px; line-height: 30px; font-size: 15px; color: #555; position: absolute; left: 0; top: 10px; text-align: justify;text-justify: distribute; padding:0 10px}
.condition_name2:after{content: '';display: inline-block;width: 100%;}
.condition_assist{width: 20px; height: 50px; line-height: 50px;float: left}
.condition_assist img{width: 16px; height: 16px; display: block; margin: 17px 2px; }
.condition_input{ width: 120px; height: 36px; border-radius: 4px; background-color: #f7f6f9; border:none; font-size: 15px; padding-left: 15px; float: left; margin-top: 7px;}
.condition_input:focus{outline: none}
.condition_input::placeholder{ color: #999; font-size: 15px; letter-spacing: 1px; text-align: center}
.condition_title{width: 100%; height: 50px; position: relative;}
.line{width: 100%; height: 1px; border-bottom: dotted 1px #999;}
.condition_button{width: 65px; height: 36px; float: left; line-height: 36px; text-align: center; color: #fff; font-size: 15px; background: linear-gradient(to right, #9c77fe, #8c53fd); margin-top: 7px; cursor: pointer; border-radius: 4px}
.condition_get{ width: 100%; height: auto; min-height: 40px; position: relative; padding-right: 140px;}
.clear_condition{ width: 132px; height: 40px; line-height: 40px; cursor: pointer; border-radius: 4px; border: solid 1px #dedede;position: absolute; right: 0; top: 0; text-align: center; padding-left: 16px; color: #333; font-size: 14px}
.clear_condition img{width: 14px; height: 14px; display: block; position: absolute; left: 9px; top: 13px;}
.c_g_one,.c_g_two{height: 30px; line-height: 30px; padding: 0 15px; background: #f0e9fc; float: left; margin: 5px 30px 10px 0; border-radius: 4px 0 0 4px; cursor: pointer; position: relative}
.c_g_one:after,.c_g_two:after{content: 'x'; width: 20px; height: 30px; position: absolute; right: -20px; top: 0; background-color: #9c77fe; text-align: center; border-radius: 0 4px 4px 0; color: #fff; font-size: 16px; font-weight: 600}
.condition_box3{ width: 100%; height: 50px; min-height: 50px; border-bottom: dotted 1px #999; padding: 10px 10px 0 120px; position: relative}
.condition_three{ width: 100px; height: auto; min-height: 30px; text-align: center; font-size: 15px; color: #555;  margin: 0 20px 15px 0; float: left; position: relative; cursor: pointer;}
.condition_three_name{width: 100%; line-height: 30px;}
.condition_three_box{width: 100%; height: auto; display: none;position: absolute; left: 0; top: 30px; background-color: #fff; z-index: 10; border-radius: 4px; padding: 5px 5px 0 5px; box-shadow: 1px 1px 8px #dedede;}
.condition_three_one{ width: 100%; height: 30px; line-height: 30px; cursor: pointer; margin-bottom: 5px}
.condition_three_one:hover{color: #682ae1;}

/*rankBox*/
.rank_box{width: 100%; height: 30px;}
.rank_one{display: inline-block; line-height: 30px; height: 30px; margin-right: 20px; font-size: 15px; padding: 0 20px 0 0; cursor: pointer; position: relative;}
.rank_icon1{ width: 20px; height: 15px; position: absolute; right: 0; top: 0; overflow: hidden}
.rank_icon2{ width: 20px; height: 15px; position: absolute; right: 0; bottom: 0; overflow: hidden}
.rank_icon1 i{ position: absolute; left: 0; top: -5px;transform: rotate(180deg)}
.rank_icon2 i{ position: absolute; left: 1px; top: -10px}
.rank_box .on{color: #a987eb}

/*goods_row*/
.goods_row_one{width: 100%; height: 200px; padding: 20px 0 20px 320px; border-bottom: solid 1px #e6e6e6; position: relative; display: block; box-sizing: border-box}
.goods_row_cover{ width: 280px; height: 160px; border-radius: 10px; display: block; position: absolute; left: 20px; top: 20px; overflow: hidden;  z-index: 1}
.goods_row_cover img{ width: 280px; height: 160px; border-radius: 10px; object-fit: cover; position: absolute;left: 0; top: 0;}
.goods_row_center{width: 740px; float: right;}
.goods_row_title{width: 100%; height: 50px; line-height: 25px; font-size: 15px;  color: #333; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; font-weight: bold}
.goods_row_title span{background-color: #a987eb; padding: 3px 5px; border-radius: 3px;  margin-right: 7px; color: #FFF;}
.goods_row_ico{ width: 100%; height: 26px; margin: 10px 0; overflow: hidden}
.goods_row_ico img{width: auto; height: 20px; display: inline-block; margin-right: 10px;}
.goods_row_ico span{padding: 3px 8px; background: #f0e9fc; color: #666; display: inline-block; margin-right: 10px; border-radius: 3px}
.goods_row_price{width: 100%; line-height: 22px; color: #e60f0f; font-weight: bold; margin-top: 25px; font-size: 16px; font-style: italic; position: relative}
.goods_row_price span{font-size: 22px}
.goods_row_one .time{width: 120px; height: 20px; line-height: 20px; z-index: 2; position: absolute; right: 0; bottom: 10px; font-size: 14px; color: #999; font-weight: 300; text-align: right}
.goods_row_right{width: 100px; float: left; height: 160px; overflow: hidden; position: relative; z-index: 1}
.goods_row_td{width: 100%; height: 40px; line-height: 40px; padding-left: 30px; font-size: 14px;color: #999; letter-spacing: 2px; position: relative}
.goods_row_td img{width: 20px; height: 20px; position: absolute; left: 0; top: 10px;}
.goods_row_background{ width: 0; height: 200px; background: linear-gradient(to right,#a987eb,#fff); position: absolute; left: 0;top: 0; z-index: 0; border-radius: 0 10px 10px 0}
.goods_row_one:hover .goods_row_cover img{transform: scale(1.2)}
.goods_row_one:hover .goods_row_title{color: #682ae1}
.goods_row_one:hover .goods_row_background{width: 400px;}
.goods_row_one:hover .goods_row_ico span{color: #682ae1}

/*goods*/
.goods_detail_left{width: 520px; height: auto; float: left; margin-right: 20px;}
.goods_cover{width: 100%; height: auto; border-radius: 10px}
.collect_box{width: 120px; height: 30px; line-height: 30px; overflow: hidden; margin: 10px 0; position: relative; padding-left: 30px; font-size: 15px; color: #666; cursor: pointer}
.collect_icon{width: 20px; height: 20px; position: absolute; left: 0; top: 5px}
.goods_alert{width: 100%; height: 34px; line-height: 34px; margin-top: 15px; padding-left: 10px; border-radius: 17px 0 0 17px;  font-size: 14px; color: #333; background: linear-gradient(to right,#c9cbfe,#fff) no-repeat; background-size: 80px 35px;}
.goods_detail_right{width: 620px; height: auto; float: right}
.goods_detail_name{width: 100%; line-height: 26px; font-size: 16px; color: #333; font-weight: bold}
.goods_trait{ width: 100%; height: auto; background: #f5f5f5; border-radius: 10px; padding: 20px; margin-top: 20px;}
.trait_one{ width: 100%; height: 30px; line-height: 30px}
.trait_one div{ display: inline-block; margin-right: 20px;}
.trait_two{ width: 50%; height: 30px; line-height: 30px; float: left; margin-top: 10px}
.goods_detail_butBox{width: 100%; height: 45px; margin-top: 20px}
.goods_detail_but_one{width: 120px; height: 45px; line-height: 45px; border-radius: 12px; float: right; margin-left: 20px; text-align: center; cursor: pointer}
.consult{ border: solid 1px #dedede; position: relative; padding-left: 25px;}
.consult img{width: 16px; height: 16px; position: absolute; left: 13px; top: 15px}
.consult:hover{background: #e0e1ff}
.chat{background: #fba4cb; color: #fff;}
.chat:hover{background: #ea68a2}
.buy{background: #9da0fb; color: #fff}
.buy:hover{background: #6367fd}
.goods_tab_box{ width: 1200px; height: 50px; border-radius: 10px 10px 0 0; margin: 20px auto 0 auto; overflow: hidden}
.goods_tab_one{ width: 140px; height: 50px; line-height: 46px; cursor: pointer; text-align: center; font-size: 18px; float: left; color: #333; border-top: solid 4px rgba(0,0,0,0);}
.goods_tab_box .on{ background: #fff; border-top: solid 4px #6367fd; color: #6367fd; font-weight: bold}
.goods_body_trait{line-height: 30px; display: inline-block; margin-right: 40px; margin-bottom: 10px}
.goods_body_title{width: 100%; margin:20px 0 20px -20px; height: 20px; line-height: 20px; font-size: 18px; color: #333; position: relative; padding-left: 20px; font-weight: bold;}
.goods_body_title:after{content: ''; width: 4px; height: 20px; position: absolute; left: 0;top: 0; background: #6367fd}
.goods_excerpt{font-size: 16px; color: #555; line-height: 30px}
.goods_detail_pics{margin-top: 10px}
.goods_detail_pics img{max-width: 100%; height: auto; border-radius: 10px; margin-bottom: 10px}
.group_box{width: 1180px; height: auto; margin-left: -20px;}
.group_one{ width: 216px; height: 120px; border-radius: 10px; background: #f3f3f3; float: left; margin:0 0 20px 20px; padding: 10px}
.group_name{width: 100%; height: 30px; line-height: 30px; font-size: 15px; color: #666; text-align: center}
.group_number{width: 100%; height: 26px; line-height: 26px; color: #999; text-align: center}
.group_btn{width: 120px; height: 30px; line-height: 30px; margin: 9px auto 0 auto; cursor: pointer; border-radius: 15px; background: linear-gradient(to right,#b691fc,#8c53fd); text-align: center; color: #fff; font-size: 15px; font-weight: bold}
.number_copy{width: 14px; height: 14px; cursor: pointer}
.goods_detail_icon{ width: 100%; height: auto; margin-top: 20px}
.goods_detail_icon img{height: 20px; width: auto; display: inline-block; margin-right: 10px;}
.flow_box{width: 100%; height: 96px; position: relative;}
.flow_one{width: 66px; height: 66px; display:inline-block; border-radius: 33px; cursor: pointer;position: relative; margin-right: 83px}
.flow_one img{width: 66px; height: 66px;}
.flow_one span{width: 66px; height: 30px; line-height: 30px; display: block; text-align: center; font-size: 15px; color: #333; position: absolute; left: 0; top: 66px; letter-spacing: 0}
.flow_one:hover{background: #a987eb}
.flow_next{width: 30px; height: 30px; display: inline-block; margin-bottom: 16px; margin-right: 83px}
.flow_one:last-child{margin-right: 0}
.game_poster{width: 1200px; height: auto; border-radius: 10px; margin: 20px auto 0 auto; display: block}

/*art*/
.empty_box{width: 1200px; height: auto; margin: auto;}
.art_left{width: 920px; height: auto; padding: 20px; border-radius: 10px; background: #fff; float: left}
.art_right{width: 260px; height: auto; float: right}
.art_type_box{width: 900px; height: 50px; margin-left: -20px;}
.art_type_one{ width: 92px; height: 40px; float: left; margin-left: 20px; cursor: pointer; position: relative}
.art_type_tag{ width: 92px; height: 10px; background: linear-gradient(to right bottom,#cab5fa,#ad8cf9); border-radius: 5px 5px 0 0;}
.art_type_name{width: 92px; height: 30px; line-height: 30px; background: rgba(250,240,240,1); text-align: center; color: #666; border-radius: 0 0 5px 5px; font-size: 15px; letter-spacing: 3px; position: absolute; left: 0; top: 10px;}
.art_type_one:hover .art_type_tag{ height: 50px; border-radius: 5px}
.art_type_one:hover .art_type_name{color: #FFF; background: rgba(250,240,240,0)}
.on .art_type_tag{height: 50px; border-radius: 5px}
.on .art_type_name{color: #FFF; background: rgba(250,240,240,0)}
.art_list_box{width: 100%; height: auto; margin-top: 40px;}
.art_list_one{width: 100%; padding-bottom: 20px;border-bottom: dotted 1px #e6e6e6;margin-bottom: 20px; cursor: pointer}
.art_list_cover{width: 240px; height: 130px; float: left}
.art_list_cover img{width: 240px; height: 130px; object-fit: cover;}
.art_list_right{ width: 620px; height: 130px; float: right; overflow: hidden; position: relative}
.art_list_name{width: 100%; height: 30px; line-height: 30px; font-size: 16px; color: #333; overflow: hidden; white-space:nowrap;text-overflow:ellipsis}
.art_list_brief{width: 100%; height: 40px; line-height: 20px; color: #858585; margin-top: 10px; overflow: hidden;text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2}
.art_list_trait{width: 100%; height: 20px; margin-top: 30px; overflow: hidden}
.art_list_one_trait{display: inline-block; height: 20px;line-height: 20px; padding-left: 25px; position: relative; color: #999; font-size: 16px; margin-right: 30px;}
.art_list_ico{width: 16px; height: 16px; position: absolute; left: 0; top: 2px;}
.right_fix_box{width: 240px; margin-left: -20px;}
.game_list_two{width: 60px; height: auto; display: block; float: left; margin-left: 20px;}
.game_list_two img{width: 100%; height: auto;}
.game_list_name2{width: 100%; height: 30px; line-height: 30px; font-size: 13px; color: #999; text-align: center; overflow: hidden; white-space:nowrap;text-overflow:ellipsis}
.game_list_two:hover .game_list_name2{color: #682ae1}
.right_art_list{width: 100%; height: 30px; line-height: 30px; position: relative; padding-left: 20px; font-size: 14px; color: #666;overflow: hidden; white-space:nowrap;text-overflow:ellipsis; cursor: pointer}
.right_art_list img{width: 20px; height: 20px; position: absolute; left: 0; top: 5px;}
.art_title_box{width: 100%; height: auto; border-bottom: dotted 1px #999; padding-top: 10px; padding-bottom: 20px; margin-bottom: 20px}
.article_title{width: 100%; line-height: 26px; font-size: 18px; color: #333; font-weight: bold; letter-spacing: 2px; text-align: center}
.article_trait{font-size: 15px; color: #999; text-align: center; line-height: 30px; margin-top: 10px;}
.article_trait span{margin-right: 30px}

/*step*/
.sell_step_title{width: 1200px; height: 60px; background: linear-gradient(to right,#8c52fd,#9c78fe); line-height: 60px; position: relative; margin: -20px -20px 20px -20px; border-radius: 10px 10px 0 0; padding-left: 180px;}
.sell_step_title3{width: 1200px; height: 60px; background: linear-gradient(to right,#db8ade,#f6bf9f); line-height: 60px; position: relative; margin: -20px -20px 20px -20px; border-radius: 10px 10px 0 0; padding-left: 180px;}
.sell_ico{ width: 150px; height: 26px; position: absolute; left: 20px; top: 17px;}
.sell_ico2{ width: 120px; height: auto; position: absolute; left: 20px; top: 17px;}
.sell_step_box{ width: 616px; height: 60px; margin: auto; padding-top: 15px;}
.sell_step_box .on{ color: #682ae1}
.step_one{ width: 120px; height: 30px; line-height: 30px; float: left; position: relative; padding-left: 30px; font-size: 15px; font-weight: bold; color: #999}
.step_one img{ width: 20px; height: 20px; position: absolute; left: 0; top: 5px;}
.step_assist{ width: 100px; height: 2px; background: #999; float: left; margin: 14px}
.sell_must{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); z-index: 20}
.must_box{ width: 430px; height: 550px; border-radius: 10px; background: #fff; position: absolute; left: 0; right: 0; top: 50%; margin: -275px auto 0 auto; padding: 20px;}
.must_box .title{width: 100%; line-height: 30px; font-size: 16px; color: #333; font-weight: bold; text-align: center}
.must_box .body{ width: 100%; height: 380px; margin: 20px 0; overflow-y: scroll; line-height: 22px;}
.must_box .btn{ width: 80%; height: 54px; line-height: 54px; color: #fff; text-align: center; font-size: 16px; font-weight: bold; background: linear-gradient(to right, #9c77fe,#8c52fd); margin: auto; border-radius: 10px; cursor: pointer}
.sell_change_box{ width: 700px; height: auto; display: none; border-radius: 10px; position: absolute; left: 0; right: 0; top: 50%; margin: -275px auto 0 auto;}
.sell_tag_box{width: 100%; height: 80px; position: relative}
.sell_tag_one{width: 50%; height: 60px; line-height: 60px; background: #f4f4f4; text-align: center; font-size: 18px; color: #666; cursor: pointer; overflow: hidden; position: absolute; z-index: 1; border-radius: 10px 10px 0 0}
.sell_tag_one:nth-of-type(1){ left: 0;top: 20px;}
.sell_tag_one:nth-of-type(2){ right: 0;top: 20px;}
.sell_tag_box .on{font-weight: bold; background: none; height: 80px; line-height: 80px; top: 0; z-index: 2; width: 53%}
.sell_tag_one:nth-of-type(1).on::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #FFF;border-radius: 10px 10px 0 0;clip-path: polygon(0 0, 95% 0, 100% 120%, 0 100%); z-index: -1;}
.sell_tag_one:nth-of-type(2).on::after{content: '';position: absolute;top: 1px;left: 0;width: 100%;height: 100%;background-color: #FFF;border-radius: 10px 10px 0 0;clip-path: polygon(0 100%, 100% 100%, 100% 0%, 5% 0); z-index: -1;}
.sell_tag_box .on::before{content: ''; width: 24px; height: 4px; border-radius: 2px; background: #682ae1; position: absolute; bottom: 10px; left: 0; right: 0; margin: auto;}
.sell_body_one{width: 100%; height: auto; padding: 20px; background: #fff;}
.sell_body_other{width: 100%; padding: 10px; background: #f9f6ff}
.sell_body_title{text-align: center; line-height: 30px; font-size: 15px; color: #666}
.sell_body_title span i{font-size: 18px; color: #682ae1; font-weight: bold}
.sell_body_step_box{width: 100%; height: auto; background: #fff; padding: 20px 0 10px 5px}
.sell_body_step_one{width: 120px; height: 100px; float: left}
.sell_body_step_img{width: 66px; height: 66px; border-radius: 33px; margin: auto; display: block}
.sell_body_step_txt{width: 100%; height: 34px; line-height: 34px; font-size: 16px; color: #666; text-align: center}
.sell_body_step_next{width: 30px; height: 30px; margin: 35px 10px; display: block; float: left}
.sell_body_step_btn{width: 215px; height: 50px; line-height: 50px; text-align: center; font-size: 18px; color: #fff; background: linear-gradient(to right,#9c77fe,#8c52fd); border-radius: 10px; margin:20px auto 10px auto;}
.add_game_title{width: 100%; height: 70px; overflow: hidden; position: relative; padding-left: 80px;}
.add_game_title img{ width: 70px; height: 70px; border-radius: 10px; position: absolute; left: 0; top: 0}
.add_game_txt{width: 100%; height: 40px; line-height: 40px; font-size: 24px; color: #333; font-weight: bold}
.add_game_btn{width: 86px; height: 30px; line-height: 30px; text-align: center; border-radius: 4px; background: #f0e9fc; color: #682ae1; font-size: 15px; border: solid 1px #682ae1}
.sell_step_title2{width: 100%; height: 50px; line-height: 50px; font-size: 16px; color: #fff; font-weight: bold; background: linear-gradient(to right,#db8ade,#f6bf9f); padding-left: 20px; border-radius: 10px; margin: 20px auto;}
.step_next{width: 300px; height: 54px; line-height: 54px; border-radius: 10px; text-align: center; color: #fff; font-size: 16px; font-weight: bold; background: linear-gradient(to right,#9c78fe,#8c52fd); margin: 20px auto;}
.upload-img-box{width: 100%; height: auto; border: dotted 1px #999; border-radius: 10px; cursor: pointer;padding: 20px; text-align: center}
.upload_assist{width: 100%; height: 100%; text-align: center; padding: 10px 0 40px 0}
.upload_assist i{font-size: 60px; color:#a987eb; font-weight: bold}
.upload_assist div{color: #999; line-height: 30px;}
.upload-img-box img{ max-width: 100%; height: auto; border-radius: 10px}
.canEditImgBox{display: inline-block; position: relative;margin-bottom: 20px; border-radius: 10px}
.del_one_img{ width: 40px; height: 40px; line-height: 40px; position: absolute;right: 0; top: 0; border-radius: 20px; text-align: center; background: rgba(255,255,255,.3); color: #ff5722}
.del_one_img i{ font-size: 26px !important;}
.step_cover{display: none}
.step_imgs{ display: none}
.step_imgs .zhu{line-height: 40px; font-size: 15px; color: #ff5722}
.step_imgs .layui-progress{margin: 20px auto;}
.tabs_head_one{width: 200px; height: 54px; line-height: 54px; font-size: 15px; color: #666; text-align: center; float: left; border-radius: 10px 10px 0 0; background: rgb(240,240,240); margin-right: 20px; cursor: pointer}
.tabs_header .on{ color: #fff; background: linear-gradient(to right,#db8ade,#f6bf9f); font-weight: bold}
#progress{ display: none}
.sell_step_right{ height: 60px; position: absolute; right: 0; top: 0}
.sell_one_txt{width: 120px; height: 60px; line-height: 60px; float: right;position: relative; padding-right: 20px; color: #fff; font-size: 15px; text-align: right}
.step_right_icon{width: 30px; height: 30px; position: absolute; left: 0; top: 15px;}

/*buy_msg_box*/
.buy_msg_box{ width: 100%; height: 100%; position: fixed; z-index: 10; left: 0; top: 0; background-color: rgba(0,0,0,.4); display: none}
.buy_msg{width: 400px; height: 200px; border-radius: 10px; background-color: #fff; position: absolute; left: 0; right: 0; top: 50%; margin: -200px auto 0 auto; padding-top: 30px;}
.close_buy_msg{width: 20px; height: 20px; position: absolute; right: 5px; top: 4px; cursor: pointer}
.buy_msg .msg_title{ width: 100%; height: 30px; line-height: 30px; font-size: 16px; color: #777; text-align: center; font-weight: bold}
.buy_msg .msg_icon{ width: 60px; height: 60px; display: block; margin: 30px auto;}
.buy_msg .msg_txt{ width: 220px; height: 50px; line-height: 25px; color: #999; text-align: center; margin: auto;}
.buy_msg .msg_btn{ width: 260px; height: 55px; line-height: 55px; font-size: 16px; font-weight: bold; color: #fff; margin: 20px auto; text-align: center; cursor: pointer; border-radius: 10px; background: linear-gradient(to right,#9c77fe,#8c53fd)}

/*order*/
.order_title{width: 100%; height: 40px; line-height: 40px; position: relative; padding-left: 50px; font-size: 18px; font-weight: bold; color: #333}
.order_title img{ width: 40px; height: 40px; position: absolute; left: 0;top: 0}
.one_service{width: 373px; height: auto; padding: 20px; float: left; margin-left: 20px; cursor: pointer; border-radius: 10px; border:solid 2px #efefef; position: relative; overflow: hidden}
.service_row{ width: 100%; height: 40px;line-height: 40px; }
.service_name{font-size: 18px; font-weight: bold; color: #666}
.service_price{ font-size: 18px; font-weight: bold; color: #e60f0f; float: right; font-style: italic}
.service_intro{font-size: 15px; color: #999; line-height: 22px; font-style: italic}
.service_on{border:solid 2px #682ae1; background: #faf8fe}
.service_on .service_name{color: #682ae1}
.service_on::after{content: ''; width: 40px; height: 40px; position: absolute; right: 0; bottom: 0; background: url("../img/ico26.png"); background-size: 40px 40px}
.pay_one{ width: 300px; height: 80px; line-height: 80px; border-radius: 10px; cursor: pointer; margin-right: 20px; float: left; border:solid 2px #efefef; position: relative; overflow: hidden; font-size: 15px; font-weight: bold; padding-left: 50px; text-align: center; color: #666}
.pay_one img{ width: 40px; height: 40px; position: absolute; left: 50px; top: 20px;}
.pay_select{ color: #682ae1;border:solid 2px #682ae1;}
.pay_select::after{content: ''; width: 40px; height: 40px; position: absolute; right: 0; bottom: 0; background: url("../img/ico26.png"); background-size: 40px 40px}
.again-txt{width: 610px; height: 100px; float: left; font-size: 15px; color: #666;line-height: 30px; padding-left: 30px; position: relative}
.change_me{width: 20px; height: 20px; border-radius: 10px; border: solid 2px #efefef; position: absolute; left: 0; top: 5px; cursor: pointer}
.again-txt a{ color: #682ae1}
.again-txt .change_on{border: solid 2px #682ae1;}
.again-txt .change_on::after{content: ''; width: 12px; height: 12px; border-radius: 6px; background: #682ae1; position: absolute; left: 2px; top: 2px;}
.again-price{width: 300px; height: 100px; line-height: 30px; float: left; font-size: 15px; color: #666}
.again-btn{width: 250px; height: 56px; line-height: 56px; float: right; background: linear-gradient(to right,#9c77fe,#8c53fd); color: #fff; font-size: 18px; font-weight: bold; text-align: center; border-radius: 10px}

/*platform*/
.platform_title{width: 1200px; height: 60px; line-height: 60px; background: linear-gradient(to right,#8c52fd,#fff); margin: -20px -20px 0 -20px; border-radius: 10px 10px 0 0; padding-left: 150px; position: relative; color: #fff; font-size: 16px}
.platform_title img{ width: 130px; height: 30px; position: absolute; left: 10px; top: 15px;}
.trader_one{width: 196px; height: 250px; float: left;margin-left: 20px; background: #f3f3f3; border-radius: 10px; position: relative; padding-top: 130px;}
.trader_game_icon{ width: 70px; height: 70px; position: absolute; left: 63px; top: 38px;}
.trader_title{ width: 90%; height: 25px; line-height: 25px; font-size: 16px; color: #333; text-align: center; margin: auto; overflow: hidden}
.trader_one .talk{ width: 110px; height: 36px; line-height: 36px; font-size: 15px; color: #fff; font-weight: bold; text-align: center; background: #999; margin: 25px auto 0 auto; border-radius: 18px; cursor: pointer}
.trader_one:hover{ background: #f0e9fc}
.trader_one:hover .talk{background: #682ae1}
.platform_step_box{ width: 100%; height: auto; margin-top: 20px; position: relative}
.platform_one_step{ width: 100%; height: auto; min-height: 80px; position: relative; padding: 40px 0 0 100px; margin: 60px 0; cursor: pointer}
.platform_one_step .left_icon{width: 60px; height: 60px; border-radius: 35px; background: #ebe2ff; position: absolute; left: 0; top: 0; z-index: 1}
.platform_one_step .left_icon img{ width: 100%; height: 100%;}
.platform_one_step .top_icon{width: 90px; height: auto; position: absolute; left: 96px; top: 0}
.platform_one_step .step_txt{width: 100%; height: auto; line-height: 30px; font-size: 15px; color: #333;}
.step_line{ width: 1px; height: 100%; position: absolute; left: 30px; top: 0; background: #a987eb;z-index: 0}
.platform_one_step:hover .left_icon{ width: 80px; height: 80px; border-radius: 40px; left: -10px}
.platform_one_step:hover .top_icon{ width: 100px; left: 480px;}
.platform_one_step:hover .step_txt{ font-size: 18px; font-weight: bold}

/*query window*/
.query_left_games{width: 320px; height: 650px; overflow-y: scroll; position: relative; float: left}
.query_left_letter{width: 100%; line-height: 30px; font-size: 16px; font-weight: bold; color: #333}
.game_list_one_y{width: 100%; height: 50px; position: relative; padding-left: 60px; cursor: pointer; margin-bottom: 10px; }
.game_list_img_y{width: 40px; height: 40px; position: absolute; left: 0; top: 5px;}
.game_list_name_y{display: inline-block; line-height: 50px; font-size: 15px}
.game_change_on{background: #f0e9fc;}
.query_right{width: 800px; height: auto; float: right; padding-top: 100px;}
.query_input_box{width: 700px; height: 480px; background: linear-gradient(to right,#ecd7fd,#ecffed); position: relative; border-radius: 10px; margin: auto;}
.query_input_cover{width: 350px; height: auto; position: absolute; right: 0; top:-50px;}
.query_input_title{width: 120px; height: auto; position: absolute; left: 40px; top: 40px}
.query_nv{ width: 738px; min-height: 358px; position: absolute; left: -18px; top: 104px; background: rgb(250,250,250); border-radius: 10px; padding: 60px 70px;}
.query_nv .title{width: 100%; line-height: 40px; color: #333; font-size: 15px }
.query_row{width: 100%; height: 60px;}
.query_row_input{width: 80%; height: 60px; box-sizing: border-box; border: solid 1px #dedede; padding-left: 20px; border-radius: 10px 0 0 10px; float: left}
.query_row_input:focus{outline: none;}
.query_row_input::placeholder{ color: #cfcfcf; font-size: 14px; letter-spacing: 1px}
.query_row_btn{width: 20%; height: 60px; line-height: 60px; text-align: center; color: #fff; background: #682ae1; float: right; font-size: 15px; border-radius: 0 10px 10px 0; cursor: pointer}
.query_row_btn:hover{background: #ffa400}
.black_txt{ width: 100%; line-height: 30px; text-align: center; margin-top: 30px;}

/*recovery*/
.query_right2{width: 800px; height: auto; float: right;}
.recovery_step_box{width: 1180px; height: auto; overflow: hidden; margin: 0 0 20px -20px}
.recovery_one{width: 176px; height: 92px; margin-left: 20px; position: relative; float: left; border: dashed 1px #d5c3fa; padding: 10px; border-radius: 10px}
.recovery_icon_box{width: 20px; height: 20px; border-radius: 10px; background: #ede6f9; position: absolute; left: 10px; top: 15px;}
.recovery_icon_box img{width: 100%; height: auto; display: block}
.recovery_one_title{width: 100%; height: 30px; line-height: 30px; font-size: 15px; color: #333; font-weight: bold; padding-left: 30px; }
.recovery_txt{width: 100%; line-height: 20px; font-size: 13px; color: #999; }
.recovery_table_box{width: 100%; height: auto; margin-bottom: 30px;}
.re_table1{width: 360px; height: auto; float: left; border: solid 1px #dedede; border-radius: 10px; overflow: hidden}
.re_table2{width: 780px; height: auto; float: right; border: solid 1px #dedede; border-radius: 10px; overflow: hidden}
.re_table_row{position: relative; width: 100%;}
.re_table_row2{position: relative; width: 100%; border-bottom: solid 1px #dedede; margin-bottom: -1px;}
.tb_title{height: 50px; line-height: 50px;font-size: 15px; font-weight: bold; text-align: center; position: relative; padding-left: 20px;}
.re_tb_title1{width: 50%; background: #fdf5ff; color: #682ae1; float: left}
.re_tb_title2{width: 50%; background: #fff6e8; color: #f6a046; float: left}
.re_tb_title3{width: 100%; background: #fff6e8; color: #f6a046;}
.re_tb_title1 img,.re_tb_title2 img{width: 20px; height: 20px; position: absolute; left: 30px; top: 15px;}
.re_tb_title3 img{width: 20px; height: 20px; position: absolute; left: 50%; top: 15px; margin-left: -30px;}
.re_ico_v{width: 30px; height: 30px; border-radius: 15px; text-align: center; line-height: 30px; background: #fff; position: absolute; left: 50%; top: 10px; margin-left: -15px}
.table_txt1{width: 40%; height: 50px; line-height: 50px; text-align: center; font-size: 15px; float: left}
.table_txt2{width: 20%; height: 50px; line-height: 50px; text-align: center; font-size: 15px; float: left}
.table_txt3{width: 100%; height: 50px; line-height: 50px; text-align: center; }
.query_right_msg{width: 100%; line-height: 100px; font-size: 15px; text-align: center;}
.recovery_waiter_box{width: 100%; height: auto; display: flex; justify-content: start; flex-wrap: wrap; gap: 5%}
.re_waiter{ width: 45%; padding: 20px; border: solid 1px #dedede; border-radius: 10px; display: flex; gap: 20px}
.re_waiter:hover{background: #fdf5ff}
.re_cover_waiter{width: 60px; height: 60px; border-radius: 30px;}
.re_info_waiter{flex: 1;}
.re_info_waiter .name{ width: 100%; line-height: 30px; font-size: 15px; color: #666; font-weight: bold}
.re_info_waiter .btn{ width: 90px; height: 30px; line-height: 30px; background: linear-gradient(to right,#c1a8fe,#c086fd); color: #fff; text-align: center; border-radius: 15px; cursor: pointer}
.re_info_waiter .btn:hover{ width: 130px;}


/*animations*/
@keyframes jump { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-15px);} }
@keyframes numberTick { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 针对WebKit浏览器 */
::-webkit-scrollbar {width: 8px; /* 滚动条的宽度 */height: 12px; /* 滚动条的高度 */}
/* 滚动条轨道 */
::-webkit-scrollbar-track {background: #f1f1f1; /* 轨道颜色 */}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {background: #dedede; /* 滑块颜色 */border-radius: 10px; /* 滑块圆角 */}
/* 滑块悬停 */
::-webkit-scrollbar-thumb:hover {background: #555; /* 滑块悬停颜色 */}