@charset "utf-8";
body {
    color: #333;
    margin: 0 auto;
    font-size: .9rem;
    background: #000;
}

.bodywrap {
    padding: 0;
}

img {
    max-width: 100%;
    object-fit: cover;
}

ul {
    margin: 0;
    padding: 0
}

li {
    list-style: none
}

a {
    text-decoration: none;
    color: #333;
}

a:hover {
    text-decoration: none;
    transition: all 0.6s;
    color: #e55949;
}

a:focus {
    text-decoration: none;
    border: none;
}

.btn:focus {
    box-shadow: none
}

input,
textarea,
button:focus {
    outline: none;
    box-shadow: none;
}

em,
i {
    font-style: normal;
}

.flexbetween {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.flexstart {
    display: flex;
    justify-content: flex-start;
}

.btn:hover {
    color: #fff;
}

.btn {
    border-radius: 0;
}


/*header*/

header {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: #1f2029;
}

.logo a {
    background: url(../images/logo.png) no-repeat left;
    display: block;
    background-size: 100%;
    height: 4rem;
    width: 15rem;
}

.navbar .dropdown-toggle,
.navbar .dropdown-menu a {
    cursor: pointer;
}

.navbar-collapse {
    flex-grow: inherit
}

.bg-dark {
    background: none !important;
    width: 90%;
    margin: 0 auto;
    padding: 0;
}

.nav-link {
    font-size: 1rem;
    color: #ccc;
}

.navbar-nav {
    margin-left: 5rem;
    flex-wrap: wrap;
}

.dropdown:hover>.dropdown-menu {
    display: block;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    width: 40rem;
}

.navbar-nav li {
    margin: 0 .2rem;
}

.dropdown>.dropdown-toggle:active {
    pointer-events: none;
}

.navbar .nav>li .dropdown-menu {
    margin: 0;
}

.dropdown-item {
    padding: 0 1rem 0 .5rem;
}

.dropdown-menu {
    border-radius: 0 0 .25rem .25rem;
    background: #fff;
}

.navbar-dark .navbar-nav .nav-link {
    padding: 1.5rem .8rem;
}

.nav-link:hover {
    background: #f0252a;
    padding: 1.5rem 2rem;
}

.dropdown-menu li {
    width: 25%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    color: #666;
    margin-bottom: 1rem;
    margin: 0 2rem 1rem 1rem;
}

.dropdown-menu img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .5rem;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background: none;
}

.dropdown-menu em:hover {
    color: #f0252a;
}

.headerbar {
    background: #101116;
    width: 100%;
}

.headerbar ul {
    width: 90%;
    justify-content: flex-end;
    margin: 0 auto;
    align-items: center;
}

.headerbar ul li {
    padding: .5rem 1rem;
    border-left: 1px solid #191a21;
}

.header-login a {
    background: url(../images/usericon.png) no-repeat left center;
    background-size: contain;
    padding-left: 1.8rem;
}

.header-cart i {
    background: url(../images/cart.png) no-repeat left center;
    background-size: contain;
    width: 2rem;
    height: 2rem;
    padding-left: 1.8rem;
    display: inline-block;
    margin-right: .5rem;
}

.header-cart {
    display: flex;
    align-items: center;
}

.header-cart a {
    font-size: 1rem;
    font-weight: bold;
    color: #f0252a !important;
}

.headerbar a {
    color: #999;
}

.header-cart span {
    color: #f0252a;
}

.navbar .dropdown-menu a:hover {
    color: #f0252a;
}

.agicon a {
    background: url(../images/gameicon.png) no-repeat left;
    background-size: contain;
    padding-left: 1.5rem;
    width: 2rem;
    color: #f0252a;
}


.register-box {
    background: #fff;
    width: 50%;
    margin: 2rem auto;
}

.register-box .usertitle {
    text-align: center;
    margin: 1rem auto 3rem auto;
}

.editform .form-group {
    align-items: center;
    margin-bottom: 2rem;
}

.register-box .editform label {
    width: 30%;
}

.editform label {
    width: 10%;
    text-align: right;
    margin-right: 2rem;
    color: #333;
    font-weight: bold;
}

.register-box .editform input {
    width: 50%;
}

.register-box-btn {
    text-align: center;
}

/*banner*/

section {
    width: 90%;
    margin: 0 auto;
}

.indexcontent {
    justify-content: center;
}

.banner1 {
    height: 0px;
    padding-bottom: 30%;
    position: relative;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet {
    background: #fff !important;
}

.banner1 img {
    width: 100%;
    height: 100%;
    position: absolute;
}

.bannertext {
    color: #fff;
    position: absolute;
    top: 20%;
    left: 0;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.bannertext div {
    width: 40%;
    text-align: center;
}

.bannertext h1 {
    font-size: 2rem;
}

.bannertext span {
    display: block;
    margin: 1rem auto;
    width: 50%;
}

.bannertext em {
    background: #f0252a;
    box-shadow: 0 0 10px #f0252a;
    padding: 1rem 3rem;
    text-transform: uppercase;
    font-size: 1rem;
    margin-top: 1rem;
    display: inline-block;
}

.bannertext:hover {
    color: #eaeaea;
}

.swiper-button-prev {
    background: #fff url(../images/arrow-left-red.png) no-repeat center !important;
    background-size: 40% !important;
    width: 2rem !important;
    box-shadow: 0 0 10px #999;
    height: 2rem !important;
    padding: 2rem;
    border-radius: 10rem;
}

.swiper-button-next {
    background: #f0252a url(../images/arrow-right-white.png) no-repeat center !important;
    background-size: 40% !important;
    width: 2rem !important;
    box-shadow: 0 0 10px #f0252a;
    height: 2rem !important;
    padding: 2rem;
    border-radius: 10rem;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    opacity: .8;
}


/*category*/

.index-left {
    width: 16%;
    background: #fff;
}

.index-right {
    width: 84%;
}

.cate-li-up img,
.arrowicon img {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .5rem;
}

.cate-li-up .arrowicon {
    background: url(../images/rightarrow.png) no-repeat right;
    background-size: 5%;
    padding: .8rem 1rem;
    margin-right: 1rem;
}

.arrowicon {
    display: flex;
    align-items: center;
    color: #333;
}

.cate-li-up {
    border-bottom: 1px solid #eaeaea;
    position: relative;
}

.cate-li-up em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cate-li-up:hover {
    background: #f2f2f2;
}

.cate-li-up:hover .cate-li-hover {
    display: block;
}

.cate-li-hover {
    position: absolute;
    top: 0rem;
    left: 15rem;
    background: #fff;
    border: 1px solid #eaeaea;
    z-index: 99;
    width: 10rem;
    cursor: pointer;
    display: none;
}

.cate-li-hover a {
    display: block;
    padding: .5rem 1rem;
    color: #333;
    border-bottom: 1px solid #eaeaea;
}

.cate-li-hover a:hover {
    color: #f0252a;
}

.index-category,
.index-checkorder,
.index-kindly {
    border-bottom: 1px solid #eaeaea;
}

.cateall a,
.btn-checkorder {
    background: #f0252a;
    height: 3rem;
    line-height: 3rem;
    display: block;
    color: #fff;
    box-shadow: 0 0 5px #ff9b9d;
    text-align: center;
    font-size: 1rem;
}

.index-checkorder,
.index-kindly,
.cateall {
    padding: 2rem;
}

.form-control {
    font-size: 1rem;
    color: #999;
    box-shadow: 0 0 2px #f5e2e0, inset 0 1px 2px rgba(0, 0, 0, .1);
}

.btn-checkorder {
    width: 100%;
    padding: 0;
}

.index-kindly {
    text-align: center;
    line-height: 1.5rem;
    color: #999;
}

.index-kindly i {
    padding: .5rem 0;
    display: block;
}

.kindlyimg {
    background: url(../images/notice.png) no-repeat top center;
    background-size: contain;
    width: 3rem;
    height: 3rem;
    display: block;
    margin: 0 auto;
}

.likeimg {
    background: url(../images/facebookbig.png) no-repeat top center;
    background-size: contain;
    width: 3rem;
    height: 3rem;
    display: block;
    margin: 0 auto;
}

.footerimg {
    background: #1f2029;
    text-align: center;
    color: #fff;
    padding: 5rem 0;
}

.footerimg span {
    display: block;
    margin-top: 2rem;
}

.footerimg span a {
    width: 2rem;
    height: 2rem;
    display: inline-block;
    margin: 0 .5rem;
}

.footerimg span a:hover {
    opacity: .5;
}

.follow1 {
    background: url(../images/fllow1.png) no-repeat;
    background-size: contain;
}

.follow2 {
    background: url(../images/fllow2.png) no-repeat;
    background-size: contain;
}

.follow3 {
    background: url(../images/fllow3.png) no-repeat;
    background-size: contain;
}

.follow4 {
    background: url(../images/fllow4.png) no-repeat;
    background-size: contain;
}

.follow5 {
    background: url(../images/fllow5.png) no-repeat;
    background-size: contain;
}

.follow6 {
    background: url(../images/fllow6.png) no-repeat;
    background-size: contain;
}

.copyright {
    background: #101116;
    text-align: center;
    padding: 1.5rem 0;
    color: #666;
}

footer {
    width: 90%;
    margin: 0 auto;
}


/*product*/

.index-product,
.index-payment {
    background: #f2f2f2;
    padding: 2rem 4rem;
}

.productlist {
    padding: 0 4rem;
}

.nametitle {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    color: #333;
    margin: 0rem 0 2rem 0;
    font-weight: bold;
    text-transform: uppercase;
}

.index-product li {
    background: #fff;
    width: 23%;
    margin-bottom: 2rem;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 0 20px #eaeaea;
    transition: all 0.6s;
}

.index-product li h2 {
    font-size: 1.2rem;
    margin: 0;
}

.productimg {
    height: 0px;
    padding-bottom: 65%;
    position: relative;
}

.index-product li span,
.index-product li h2 {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.productimg img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}

.index-product li span {
    display: block;
    color: #666;
}

.index-product li em {
    background: #000;
    color: #fff;
    display: block;
    height: 2.8rem;
    line-height: 2.8rem;
    text-transform: uppercase;
    margin-top: .5rem;
}

.index-product li:hover em {
    background: #f0252a
}

.index-product li:hover,
.swiper2 .swiper-slide:hover,
.newslist li:hover {
    opacity: .95;
    transform: scale(1.1);
    z-index: 9999;
}

.productinfo {
    padding: .5rem 1rem 1rem 1rem;
}

.index-product .productimg span {
    background: url(../images/hoticon.png) no-repeat center;
    position: absolute;
    top: 0;
    left: 1rem;
    color: #fff;
    background-size: 100%;
    height: 51px;
    width: 38px;
    padding-top: .7rem;
    font-size: .7rem;
}

.index-news {
    background: #f2f2f2 !important;
    padding: 0 4rem !important;
}

.swiper2 h2,
.newslist h2 {
    font-size: 1.2rem;
}

.swiper2 .swiper-slide-img,
.newslist .swiper-slide-img {
    height: 0px;
    padding-bottom: 70%;
    position: relative;
}

.swiper2 .swiper-slide img,
.newslist .swiper-slide-img img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
}

.swiper2 a span {
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.newsinfo {
    padding: 1rem;
}

.index-news-read {
    border-top: 1px solid #eaeaea;
    margin-top: .8rem;
    padding-top: .8rem;
}

.index-news-read em {
    background: url(../images/arrow-right-red.png) no-repeat right;
    background-size: 15%;
    padding-right: 1.5rem;
    color: #f0252a;
    text-transform: uppercase;
}

.swiper2 .swiper-slide a,
.newslist a {
    background: #fff;
    margin: 0 2rem;
    display: block;
    box-shadow: 0 0 20px #eaeaea;
}

.swiper2 .swiper-slide {
    padding-bottom: 2rem;
}

.swiper2 .swiper-slide {
    transition: all 0.6s;
}

.index-payment div {
    background: #fff;
    box-shadow: 0 0 20px #eaeaea;
    text-align: center;
    padding: 1.5rem 0;
}

.sectionbox {
    background: #f2f2f2;
    padding: 2rem;
}

.breadcrumbdiv,
.product-intro {
    width: 90%;
    margin: 0 auto;
}

.breadcrumb {
    background: none;
    color: #ccc;
    margin-bottom: 0;
    padding: .8rem 0;
}

.breadcrumb>li+li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

.breadcrumb a {
    color: #ccc;
}


/*server*/

.server-list,
.sectionuserbox,
.userinfomation,
.comments,
.cartlist,
.faq,
.newstext,
.allgame,
.nopicbg {
    background: #fff;
    padding: 1rem 2rem;
    box-shadow: 0 0 20px #eaeaea;
}

.server-span {
    font-size: 1rem;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.server-span em {
    color: #f0252a;
}

.server-choose .form-group {
    width: 15%;
    margin-right: 1rem;
}

.form-control:focus {
    border-color: #ccc;
    outline: 0;
    box-shadow: none;
}

label {
    color: #999;
}

.server-choose .form-control {
    color: #666;
}

thead {
    background: #e6e6e6;
    font-size: 1rem;
}

.table thead th {
    border-bottom: 0;
}

.serverbtn span {
    margin-right: 0;
}

.server-price {
    color: #f0252a;
    font-size: 1.2rem;
    font-weight: bold;
}

.serverbtn a,
.hotpro-btn {
    background: #f0252a;
    height: 2.4rem;
    line-height: 2.4rem;
    display: block;
    color: #fff;
    box-shadow: 0 0 5px #ff9b9d;
    text-align: center;
    font-size: 1rem;
    width: 5rem;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.serverbtn a i,
.hotpro-btn i {
    background: url(../images/cart.png) no-repeat center center;
    background-size: contain;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    margin-right: .2rem;
}

.serverbtn a:hover,
.cateall a:hover,
.btn-checkorder:hover,
.registerbox a:hover,
.loginbox .btn:hover,
.editform .btn:hover,
.checkoutbtn a:hover {
    opacity: .8;
}

.server-pro-list .btn {
    width: 8rem;
    float: right;
}

.table td,
.table th {
    text-align: center;
    vertical-align: inherit;
    border: 0;
}

.tablecolor {
    background: #f7f7f7;
}


.server-pro-list p{margin-bottom:0}
.server-pro-list .table .special-tr td {
    padding: .75rem;
}

.special-tr i {
    background: url(../images/hot.gif) no-repeat left;
    background-size: contain;
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: 2rem;
    height: 1rem;
}

.sale-price {
    color: #333;
    display: block;
    font-weight: normal;
    font-size: .9rem;
    text-decoration: line-through;
}

.nothing,
.nothing td {
    border-bottom: 0 !important;
}

.special-tr {
    background: #fffbd9;
}

.special-tr-color {
    color: #f0252a;
    font-weight: bold;
    text-align: left;
}

.server-pro-list tr td {
    position: relative;
}

.buy-hoticon {
    background: url(../images/photicon.png) no-repeat top right;
    width: 20%;
    background-size: 60%;
    display: inline-block;
    height: 2rem;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 .5rem .5rem 0;
}

.hot-pro-list span {
    display: block;
}

.hot-pro-list li {
    position: relative;
    width: 19%;
    background: #f1f1f1;
    border-radius: .5rem;
    padding: .2rem 1rem .5rem 1rem;
    box-shadow: 0 0 15px #efefef;
    border: 1px solid #ffb888;
}

.hotpro-name {
    font-size: 1rem;
    margin: .2rem 0;
    padding: .2rem 0;
}

.hot-pro-list {
    margin-bottom: 1rem;
}

.hot-pro-list li:hover {
    opacity: .8;
}

.hot-pro-list li a {
    color: #333;
}

.hotpro-des {
    height: 35px;
    overflow: hidden;
    line-height: 15px;
}

.hotpro-btn {
    margin: .5rem 0 .2rem 0;
    display: flex;
    align-items: center;
    height: 2rem;
    line-height: 2rem;
    width: 4rem;
}

.hotpro-btn i {
    width: 1.2rem;
    height: 1.2rem;
}

.hotpro-des em {
    font-weight: bold;
}

.hotpro-price {
    font-size: 1.2rem;
    font-weight: bold;
    color: #f0252a;
}

.letter-sort {
    background: #fff;
    border-radius: .5rem;
    margin-bottom: .5rem;
}

.letter-sort a {
    border: 1px solid #ddd;
    padding: .8rem 1.2rem;
    font-size: 1rem;
    display: inline-block;
    text-align: center;
    margin-bottom: .5rem;
}

.letter-sort a:hover {
    background: #e55949;
    color: #fff;
}


/*Our Advantage*/

.advantage {
    margin-top: 2rem;
    box-shadow: 0 0 20px #eaeaea;
}

.advantage ul {
    background: #fff;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.advtitle {
    background: #000;
    color: #fff;
    font-size: 1.2rem;
    padding: .8rem 1rem;
}

.advantage ul span {
    width: 5rem;
    height: 5rem;
    display: block;
    margin: 0 auto;
}

.advantage ul li {
    margin: 2rem auto;
    width: 25%;
    text-align: center;
}

.advantage1 {
    background: url(../images/advantage1.png) no-repeat top;
    background-size: contain;
}

.advantage2 {
    background: url(../images/advantage2.png) no-repeat top;
    background-size: contain;
}

.advantage3 {
    background: url(../images/advantage3.png) no-repeat top;
    background-size: contain;
}

.advantage4 {
    background: url(../images/advantage4.png) no-repeat top;
    background-size: contain;
}


/*product-pic*/

.product-bp {
    position: relative;
    height: 0;
    padding-bottom: 20%;
}

.product-bp img {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
}

.shopgame-title {
    background: #000;
    color: #fff;
    font-size: 1rem;
    display: block;
    padding: .8rem 1rem;
}

.product-intro {
    color: #fff;
    padding: 2rem 0 3rem 0;
}

.product-intro h1 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.product-intro span {
    width: 70%;
    display: block;
}

.allgame img {
    width: 2rem;
    height: 2rem;
    margin-right: .5rem;
}

.allgame li {
    width: 18%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1rem;
}


/* .allgame li{border-bottom: 1px solid #eaeaea;} */

.index-product dl {
    align-items: center;
}

.index-product dt {
    width: 15%;
    text-align: center;
}

.index-product dd {
    width: 85%;
    flex-wrap: wrap;
}

.itemtitle {
    background: url(../images/gameicon.png) no-repeat top;
    display: block;
    background-size: 20%;
    padding: 3rem 2rem 0 2rem;
    border-right: 1px solid #ccc;
    margin-right: 2rem;
}

.iteminfo a {
    width: 20%;
    display: inline-block;
    padding: .2rem 0;
    margin-right: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iteminfo a::before {
    content: '·';
    font-weight: bold;
    font-size: 1.5rem;
    padding-right: .5rem;
}


/*login*/

.modal-dialog {
    max-width: 700px;
}

.modal-body {
    padding-bottom: 2rem;
}

.modal-dialog .flexstart label {
    width: 25%;
    margin-top: .5rem;
}

.modal-dialog .form-group div {
    width: 65%;
}

.kong {
    width: 20%;
}

.loginbox {
    width: 65%;
    border-right: 1px solid #eaeaea;
}

.registerbox {
    width: 30%;
    text-align: center;
    margin-top: 4rem;
}

.form-check a {
    color: #666;
    margin-left: 1rem;
    display: inline-block;
}

.loginbox .btn,
.editform .btn {
    background: #f0252a;
    box-shadow: 0 0 5px #ff9b9d;
    border: 0;
    padding: 0 3rem;
    font-size: 1rem;
    height: 3rem;
    line-height: 3rem;
}

.loginbox form {
    text-align: center;
}

.loginbox form div {
    text-align: left;
}

.registerbox a {
    background: #000;
    box-shadow: 0 0 10px #666;
    border: 0;
    padding: 0 2.5rem;
    font-size: 1rem;
    color: #fff;
    display: inline-block;
    margin-top: 1rem;
    height: 3rem;
    line-height: 3rem;
}

.registercontent .form-check-label {
    width: 75%;
}


/*user*/

.usersection {
    box-shadow: none;
}

.userleft {
    background: #f2f2f2;
    width: 20%;
}

.userleft li a {
    border-bottom: 1px solid #eaeaea;
    padding: 1.5rem;
    font-size: 1rem;
    display: block;
}

.userleft .user-active,
.userleft li a:hover {
    font-weight: bold;
    border-left: 4px solid #f0252a;
    background: #fff;
}

.user-active a {
    color: #f0252a;
    font-size: 1.2rem;
}

.userright {
    padding: 0 4rem;
    width: 80%;
}

.usertitle {
    font-weight: bold;
    font-size: 1.5rem;
    display: block;
    margin-bottom: 1rem;
}

.my-Profile li {
    padding-bottom: 2rem;
    color: #666;
}

.my-Profile a {
    color: #f0252a;
    padding-left: 1rem;
    text-decoration: underline;
}

.my-Profile em {
    font-weight: bold;
    padding-right: 1rem;
    color: #333;
}

.editform label {
    width: 10%;
    text-align: right;
    margin-right: 2rem;
    color: #333;
    font-weight: bold;
}

.editform .form-group {
    align-items: center;
    margin-bottom: 2rem;
}

.editform input,
.editform select {
    width: 30%;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #f0252a;
    border: 0;
    opacity: .8;
}

.my-orderbox .form-group {
    width: 30%;
    align-items: center;
}

.my-orderbox label {
    white-space: nowrap;
    margin: 0 1rem 0 0;
    color: #333;
}

.my-orderbox .btn {
    background: #000;
    border: 0;
    margin-left: .5rem;
}

.my-orderbox .searchbox {
    width: 35%;
}

.headerbar .al-login a {
    color: #fff;
}

.headerbar .al-login a:hover {
    color: #f0252a;
}

.headerbar .al-login em {
    padding-left: .5rem;
}

.integral {
    position: absolute;
    top: 3rem;
    left: 2rem;
    background: #fff url(../images/integralbg.png) no-repeat right top;
    padding: 1rem;
    color: #666;
    z-index: 9999;
    width: 15rem;
    background-size: contain;
    display: none;
}

.al-login {
    position: relative;
}

.al-login:hover .integral {
    display: block;
}

.integral i {
    font-size: 1.5rem;
    font-weight: bold;
    display: block;
    color: #000;
    padding: 1rem 0 0 2rem;
}

.integral span {
    background: url(../images/integral.png) no-repeat left;
    background-size: contain;
    padding-left: 2rem;
}


/*user*/

.cartlist .table td,
.cartlist .table th {
    text-align: left;
}

.qty {
    width: 15%;
}

.qty input {
    width: 3rem !important;
    border-radius: .25rem !important;
    height: 2rem !important;
    text-align:center;
}

.cartlist a {
    background: url(../images/delete.png) no-repeat center;
    background-size: contain;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
}

.cartlist .operation,
.cartlist .table .operation {
    text-align: center;
}

.proname {
    width: 50%;
}

.proprice {
    width: 20%;
}

.pronameinfo {
    font-weight: bold;
}

.codeinput {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #eaeaea;
}

.codeinput .flexstart {
    align-items: center;
}

.codeinput input {
    margin: 0 .5rem;
}

.codeinput .btn {
    background: #000;
    border: 0;
    padding: .3rem .75rem;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none
}

.allprice {
    text-align: right;
    margin-top: 1rem;
}

.allprice span {
    display: block;
    padding: .2rem 0;
}

.allprice i,
.propricecolor {
    color: #f0252a;
}

.grandprice {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem 0;
}
.grandprice .btn-checkorder{width:10rem; float:right}
.sectionuserbox,
.cartbox,
.userinfomation {
    padding: 1rem 2rem;
    margin: 1rem 0;
}

.userinfomation .form-group {
    width: 35%;
    margin-right: 3rem;
    align-items: center;
    font-size:.9rem;
}

.delivery-method .form-check-label span {
    display: block;
    font-size: 1rem;
    font-weight: bold;
    color: #333;
}

.delivery-method .form-check-label em {
    color: #666;
    font-weight: normal;
}

.method-select,
.no-select {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    margin-right: 1rem;
}

.method-select {
    background: url(../images/select.png) no-repeat top;
    background-size: contain;
}

.no-select {
    background: url(../images/selectno.png) no-repeat top;
    background-size: contain;
}

.payment li {
    width: 18%;
    border: 1px solid #eaeaea;
    text-align: center;
    padding: .5rem;
}

.payment li:hover,
.choose-payment label:hover {
    border: 1px solid #e55949;
}

.payment li a {
    display: block;
}

.payment img {
    display: inline-block;
    height: 2rem;
    object-fit: contain;
    margin: 0 auto;
}

.payment span {
    display: block;
    padding-top: .5rem;
}

.payment em {
    margin-bottom: .5rem;
    display: block;
}

.payment ul {
    margin-bottom: 1rem;
    color: #666;
    flex-wrap: wrap;
    justify-content: space-between;
}

.choose-payment label {
    width: 18%;
    border: 1px solid #eaeaea;
    padding: 1rem;
    margin-right: 1rem;
    border-radius: .25rem;
}

.choose-payment label img {
    margin-left: 1rem;
}

.choose-payment form {
    width: 100%;
}

.choose-payment label input {
    width: 1rem;
    height: 1rem;
}

.comments,
.cartlist {
    padding: 2rem;
}

.comments .form-group {
    width: 40%;
}

.checkoutbtn {
    margin: 3rem auto 1rem auto;
    display: flex;
    justify-content: center;
}

.checkoutbtn .btn {
    background: #f0252a;
    box-shadow: 0 0 10px #ff9b9d;
    padding: 1rem;
    font-size: 1.5rem;
    color: #fff;
    display: block;
    width: 20%;
}


/*news*/

.index-news li {
    width: 25%;
    margin-bottom: 2rem;
    transition: all 0.6s;
}

.pagination {
    justify-content: center;
    margin: 2rem 0;
}

.page-link {
    padding: 1rem 2rem;
    color: #333;
    font-size: 1rem;
}

.page-item.active .page-link,
.page-link:hover {
    background: #f0252a;
    border-color: #f0252a;
    color: #fff;
}

.page-link:focus {
    box-shadow: none;
    border: 1px solid #f0252a;
}

.newstext h1 {
    text-align: center;
    font-size: 2rem;
    margin: 1rem 0;
}

.newstext p,
.newstext span {
    color: #333;
}

.faq li {
    padding: 2rem 0;
    font-size: 1rem;
    border-bottom: 1px solid #eaeaea;
}

.faq em {
    font-weight: bold;
}

.faq i {
    color: #999;
}

.faq .usertitle {
    font-size: 2rem;
}

.shopping-wrapper {
    width: 70%;
    margin: 0 auto;
}

.shopping-process span {
    display: flex;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 1rem;
    margin-bottom: 1.5rem;
    border-left: 0;
    flex-wrap: wrap;
}

.shopping-process span em {
    width: 25%;
    text-align: center;
    font-weight: bold;
    padding: .8rem;
    display: inline-block;
    border-left: 1px solid #ddd;
}

.step3 {
    background: #e55949;
    color: #fff;
}

.cofirm-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    display: block;
}

.cofirm-name em {
    background: #e55949;
    font-size: 1.5rem;
    border-radius: 10rem;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 2.2rem;
    margin-right: 1rem;
    font-weight: normal;
}

.userinfomation,
.comments {
    box-shadow: none;
}

.cartlist {
    padding-bottom: 0;
}

.table-responsive th {
    background: #E8F6FF;
}

.table-responsive tr {
    border-bottom: 1px solid #eaeaea;
}

.table-responsive input,
.delivery-method input[type="checkbox"] {
    width: 20px;
    height: 20px;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    outline: none;
}

.checked {
    background: url(../images/checked.png) center no-repeat;
    background-size: contain;
    width: 22px;
    height: 22px;
}

.userinfomation label {
    white-space: nowrap;
    margin-right: 1rem;
  
    color: #333;
    font-weight: bold;
}
.userinfomation .usertitle {
    font-size: 1rem;
    font-weight: bold;
}

.delivery-method .form-group {
    width: 100%;
}

.form-check-label {
    display: flex;
    align-items: center;
}

.form-check-label input {
    margin-right: .5rem;
}

.delivery-method-line {
    border-bottom: 1px solid #eaeaea;
    padding: 1rem 0;
    margin-bottom: 1rem;
}
.delivery-method-line em{margin-top:.5rem; display:block}

@media screen and (min-width: 320px) and (max-width: 768px) {
    .topnone,
    .index-left,
    .bannertext span,
    .freenone {
        display: none;
    }
    
    .dropdown-menu li {
        width: 100%;
    }
    .userinfomation form .flexstart,.userinfomation .flexstart{
        display: inherit;
    }
    .shopping-wrapper,
    .checkoutbtn .btn {
        width: 100%;
    }
    .shopping-process em {
        width: 50% !important;
        border-bottom: 1px solid #eaeaea;
    }
    .shopping-process span {
        margin-bottom: .5rem;
    }
    .header-cart i {
        width: 1.5rem;
        height: 1.5rem;
    }
    .header-cart a {
        font-size: .9rem;
    }
    .navbar-nav {
        margin-left: 0;
    }
    .itemtitle {
        background-size: inherit;
    }
    .navbar-dark .navbar-nav .nav-link {
        padding: .8rem;
        border-bottom: 1px solid #30313b;
    }
    .dropdown:hover>.dropdown-menu {
        display: inherit;
        width: 88%;
    }
    .dropdown-menu a {
        float: none;
        width: inherit;
        padding: .5rem;
    }
    .headerbar ul {
        justify-content: center;
        width: 100%;
    }
    .headerbar ul li {
        padding: 1rem .5rem;
        width: 33%;
    }
    .bannertext h1 {
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .index-right,
    section,
    .bannertext div,
    .registerbox,
    .newslist li,
    .product-intro span,
    .index-product dt,
    .index-product dd,
    .userinfomation .form-group,
    .comments .form-group,
    .userleft,
    .userright,
    .my-orderbox .form-group {
        width: 100%;
    }
    .swiper1 .swiper-slide {
        padding-bottom: 30%;
    }
    .swiper-button-next,
    .swiper-button-prev {
        padding: 0;
    }
    .bannertext em {
        padding: .5rem 1rem;
    }
    .index-product,
    .index-payment,
    .index-news {
        padding: 2rem .5rem 0 .5rem !important;
    }
    .index-product li {
        width: 48%;
        margin-bottom: 1rem;
    }
    .nametitle {
        font-size: 1.5rem;
    }
    .swiper2 .swiper-slide,
    footer {
        width: 100% !important;
    }
    .footerimg {
        padding: 3rem 0;
    }
    .index-payment {
        padding-top: 0rem !important;
    }
    .logo a {
        width: 10rem;
        height: 3rem;
    }
    .sectionbox,
    .server-list,
    .sectionuserbox,
    .userinfomation,
    .comments,
    .faq,
    .newstext,
    .allgame {
        padding: .5rem;
    }
    .allgame li {
        width: 50%;
    }
    .server-choose form {
        display: inherit;
    }
    .server-choose .form-group {
        width: 43%;
        float: left;
    }
    .table thead th {
        font-size: .9rem;
    }
    .server-price {
        font-size: 1rem;
    }
    .serverbtn a {
        height: 2rem;
        line-height: 2rem;
        width: 4.5rem;
    }
    .serverbtn a i {
        width: 1.2rem;
        height: 1.2rem;
    }
    label {
        margin-bottom: .2rem;
    }
    .advantage ul {
        padding: 1rem;
        font-size: 1rem;
    }
    .advantage ul li {
        width: 40%;
        text-align: center;
        margin: 1rem auto;
    }
    .advantage ul span {
        width: 2rem;
        height: 2rem;
    }
    .advantage ul em {
        font-size: .9rem;
    }
    .loginbox {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 2rem;
    }
    .registerbox {
        margin-top: 1rem;
    }
    .registerbox span {
        display: block;
    }
    .newslist a {
        margin: 0;
    }
    .special-tr i {
        top: 0;
    }
    .page-link {
        padding: .5rem .75rem;
    }
    .product-bp {
        height: 300px;
    }
    .productsection {
        padding: .5rem;
    }
    .index-product dl {
        display: inherit;
        margin-bottom: 2rem;
    }
    .itemtitle {
        border: none;
        padding-top: 5rem;
        font-size: 1rem;
    }
    .iteminfo a {
        width: 45%;
        margin-right: 1rem;
    }
    .userinfomation form,
    .choose-payment {
        display: inherit;
    }
    .payment li {
        width: 48%;
        margin-bottom: 1rem;
    }
    .choose-payment label {
        width: 100%;
    }
    .checkoutbtn {
        width: 80%;
    }
    .cartlist,
    .sectionbox {
        padding: .5rem !important;
    }
    .method-select,
    .no-select {
        width: 1.5rem;
        height: 1.5rem;
    }
    .userbox,
    .iteminfo {
        display: inherit
    }
    .server-pro-list .table td {
        text-align: left;
    }
    .userright {
        padding: 1rem 0;
    }
    .editform label {
        width: 30%;
        margin-right: 1rem;
    }
    .editform input,
    .editform select {
        width: 60%;
    }
    .coupon-code .table thead th {
        white-space: nowrap;
    }
    .usertitle {
        margin-bottom: 1rem;
    }
    .server-span {
        padding-bottom: .5rem;
    }
    .server-list .server-price {
        padding: 0;
    }
    .banner1 img {
        height: 280px;
    }
    .hot-pro-list li {
        width: 100%;
        margin-bottom: 2%;
    }
    .hot-pro-list {
        display: flex;
        width: 100%;
    }
    .letter-sort a {
        width: 15%;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .index-left {
        width: 25%;
    }
    .index-right,
    .shopping-wrapper {
        width: 100%;
    }
    .swiper1 .swiper-slide {
        padding-bottom: 0;
    }
    section {
        width: 100%;
    }
    .index-product,
    .index-payment {
        padding: 2rem;
    }
    .index-product li {
        width: 48%;
    }
    .swiper2 .swiper-slide,
    footer {
        width: 100% !important;
    }
    .swiper-button-next,
    .swiper-button-prev {
        padding: .5rem;
    }
    .footerimg {
        padding: 3rem 0;
    }
    .bannertext span {
        display: none;
    }
    .bannertext em {
        padding: .5rem 1rem;
    }
    .dropdown:hover>.dropdown-menu {
        width: 15rem;
    }
    .navbar-dark .navbar-nav .nav-link {
        border-bottom: 0;
    }
    .index-left {
        display: none;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1336px) {
    .logo a {
        width: 10rem;
        height: 3rem;
    }
    section,
    footer {
        width: 96%;
    }
    .index-left {
        width: 21%;
    }
    .index-right {
        width: 75%;
    }
    .navbar-dark .navbar-nav .nav-link {
        padding: .8rem;
    }
    .shopping-wrapper {
        width: 100%;
    }
}

@media screen and (min-width: 1330px) and (max-width: 1680px) {
    .navbar-dark .navbar-nav .nav-link {
        padding: .8rem;
    }
    .index-left {
        width: 25%;
    }
    .shopping-wrapper {
        width: 100%;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .index-left {
        width: 25%;
    }
}


.footer-nav{width: 100%; margin: 1rem auto; display: flex; justify-content: center;}
.footer-nav a{margin: 0 1rem; color:White}

.product-sort{margin-bottom: 2rem;}
.userinfomation .form-group span{font-size: 1rem;}