/* banner */
.banner {
    position: relative;
    /*height: 7.81rem;*/
    width: 100%;
    display: flex;
    justify-content: left;
}

.banner-img {
    width: 89.5%;
    display: flex;
    justify-content: space-between;
}

.banner-left,
.banner ul {
    width: 1rem;
}

.com-head>ul {
    padding: 0;
    padding-top: 0.8rem;
}

.banner-left p {
    display: block;
    transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    font-size: 0.26rem;
    font-family: Arial;
    font-weight: bold;
    color: #333333;
    line-height: 8.81rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.banner-img img {
    height: 100%;
    width: 33.4%;
}

.banner ul {
    height: 50%;
    margin: auto;
}

.banner ul li {
    height: 30%;
}

.banner ul li a {
    font-size: 0.16rem;
    font-family: Arial;
    font-weight: 400;
    color: #999999;
    display: block;
    height: 100%;
    width: 100%;
    position: relative;
}

.banner ul li a img {
    width: .16rem;
    height: auto;
    position: absolute;
    left: 0.4rem;
    top: 0.7rem;
}

.banner ul li a p {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
}

/* main */

.main {
    background: #fff;
}

/* disp */
.disp {
    width: 70%;
    margin: 0 auto;
}

.disp-card {
    width: 100%;
}

.disp-left,
.disp-right {
    float: left;
    width: 50%;
}

.disp-card p {
    font-size: 0.22rem;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 0.6rem;
}

.disp-left .image1 {
    height: 6.04rem;
}

.disp-left .image1,
.dist-right .image3 {
    width: 5.98rem;
}

.disp-right .image3 {
    height: 5rem;
}

.disp-left .image2 {
    width: 4.35rem;
    height: 4.6rem;
    margin-top: 0.64rem;
    margin-left: 0.68rem;
}

.disp-card {
    margin-top: 0.2rem;
    padding-bottom: 0.4rem;
}

.disp-right {
    margin-top: 1.2rem;
}

.disp-text {
    margin-top: 0.6rem;
    margin-left: 0.68rem;
}

.disp-right .tit_h4 {
    font-size: 0.38rem;
    font-family: Arial;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 0.4rem;
}

.disp-text p {
    width: 3.5rem;
    font-size: 0.14rem;
    font-family: Arial;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 0.24rem;
    height: 1.9rem;
    padding-top: 0.2rem;
}

.disp-text em {
    background: rgba(0, 32, 58, 1);
    border-radius: 0.5rem;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    -ms-border-radius: 0.05rem;
    -o-border-radius: 0.05rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.22rem;
    font-family: Arial;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
}

/*  option */

.option {
    width: 100%;
}

.mt-tabpage-title {
    height: 1.5rem;
    margin: 0 auto;
    padding: 0 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mt-tabpage-title a {
    font-size: 0.24rem;
    font-family: Arial;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    line-height: 0.28rem;
    margin: 0 0.4rem;
    float: left;
    cursor: pointer;
}

.mt-tabpage-item {
    position: relative;
}

.mt-tabpage-item-cur::after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    background: rgba(8, 201, 203, 1);
    bottom: -0.05rem;
    left: 0;
}

.option ul {
    margin: 0 auto;
    width: 12.8rem;
}

.option li .paging {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.pag-card {
    width: 30%;
    height: 4.8rem;
}

.pag-card img {
    width: 4.26rem;
    height: 3.22rem;
}

.pag-card p {
    font-size: 0.18rem;
    font-family: Arial;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    line-height: 0.2rem;
    padding-bottom: 0.1rem
}

.pag-card .tit_h4 {
    font-size: 0.2rem;
    font-family: Arial;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    line-height: 0.46rem;
}

.pag-card span {
    font-size: 0.16rem;
    font-family: Arial;
    font-weight: 400;
    color: rgba(8, 201, 203, 1);
    line-height: 0.28rem;
    position: relative;
}

.pag-card span::after {
    content: " ";
    height: 1px;
    width: 100%;
    position: absolute;
    background: rgba(8, 201, 203, 1);
    bottom: 0;
    left: 0;
}

/* pic */

.foot .tit_h3 {
    text-align: left;
}

.category-left {
    width: 29%;
    float: left;
    vertical-align: top;
    background-color: #fff;
}

.category-left .tit_h3 {

    font-size: 0.22rem;
    font-family: Arial;
    font-weight: bold;
    color: #222E56;
    text-align: left;
    font-size: 0.22rem;
}

.category-left .category-menu .tit_h4 {
    font-size: 0.2rem;
    border-bottom: 1px solid #E6E6E6;
    position: relative;
    margin: 0;
    padding: 0.24rem 0;
    margin-top: 0.25rem;
    cursor: pointer;
    font-family: Arial;
    font-weight: 600;
    color: #00203A;
}

.category-left .category-menu .tit_h4 .glyphicon {
    float: right;
}

.category-left .category-menu>li .categoty-sub-menu {
    display: none;
}

.category-left .category-menu>li.current .categoty-sub-menu {
    display: block;
}

.category-left .categoty-sub-menu {
    padding-left: 0.25rem;
}

.category-left .categoty-sub-menu li {
    padding: 0.28rem 0 0.2rem;
    border-bottom: 1px solid #E6E6E6;
    font-size: 0.18rem;
    cursor: pointer;
}

.category-left .categoty-sub-menu1 li {
    font-size: 0.18rem;
}

.category-left .categoty-sub-menu1 li {
    font-size: 0.18rem;
}

.category-left .category-menu>li.current>.tit_h4 {
    border-bottom: 1px dashed #E6E6E6;
    font-family: Arial;
    font-weight: 400;
    color: #67B7E4;
    font-size: 0.22rem;
    font-family: Arial;
    font-weight: 600;
}

.category-left .category-menu .tit_h4 .glyphicon::before {
    content: "\e258";
    color: #333;
}

.category-left .category-menu>li.current>.tit_h4 .glyphicon::before {
    content: "\e259";
    font-weight: 400;
    color: #67B7E4;
}

.category-left .categoty-sub-menu>li {
    font-size: 0.18rem;
}

.category-left .categoty-sub-menu li.current {
    border-bottom: 1px dashed #E6E6E6;
    font-family: Arial;
    font-weight: 400;
    color: #67B7E4;
}

.mt90 {
    margin-top: 0.9rem;
}

.stock {
    margin-top: 0.1rem;
    color: #999999;
}

.stock-type {
    border: 1px solid #CDCDCD;
    color: #C32029;
    display: inline-block;
    height: 0.18rem;
    width: 0.18rem;
    margin-right: 0.15rem;
    border-radius: 50%;
    font-size: 0.12rem;
    text-align: center;
    vertical-align: top;
    margin-top: 0.05rem;
}

.best-sellers-list {
    margin-top: 0.4rem;
}

.best-sellers-list li {
    margin-bottom: 0.3rem;
    border: 1px solid #F5F5F5;
    height: 1.15rem;
}

.best-sellers-list .img-box {
    height: 100%;
    width: 1rem;
    display: inline-block;
    vertical-align: top;
    background-color: #F5F5F5;
}

.best-sellers-list .img-box .img-box-content {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
}

.best-sellers-list .img-box img {
    width: 90%;
    margin: 0 5%;
}

.best-sellers-list .seller-content {
    display: inline-block;
    padding: 0.25rem 0 0 0.15rem;
}

.best-sellers-list .seller-content p {
    color: #666;
    font-size: 0.16rem;
    margin: 0;
    height: 0.5rem;
    width: 2rem;
}

.best-sellers-list .score-group {
    position: relative;
    font-size: 0.15rem;
    color: #c32029;
}

.best-sellers-list .score-start {
    position: absolute;
    left: 0;
    top: 0;
    width: 0.73rem;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.category-right {
    width: 68%;
    float: right;
}

.product-right-title {
    padding: 0.15rem;
    position: relative;
}

.product-right-title span {
    font-size: 0.16rem;
    font-family: Arial;
    font-weight: 400;
    color: #666666;
}

.product-right-title::after {
    content: '';
    position: absolute;
    height: 0;
    right: 1.6rem;
    left: 2.5rem;
    top: 50%;
    border-top: 1px solid #e6e6e6;
}

.product-right-title img {
    display: inline-block;
    width: 0.24rem;
    height: 0.24rem;
    margin-right: 0.1rem;
}

.product-right-title a {
    float: right;
    color: #333333;
    font-size: 0.16rem;
    position: relative;
    padding-right: 0.2rem;
}

.product-right-title a::after {
    position: absolute;
    content: "";
    width: 1.26rem;
    height: 0.01rem;
    background: #2A3342;
    bottom: 0;
    right: 0;
}

.pr2-r-item {
    position: relative;
    display: block;
    width: 100%;
    background-color: #f5f5f5;
    height: 3rem;
    text-align: center;
    margin-bottom: 0.3rem;
    overflow: hidden;
}

.pr2-r-item .pic {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.pr2-r-item .info {
    position: absolute;
    z-index: 10;
    transition: .3s;
    /* padding: 0 0.2rem 0; */
    height: 100%;
    width: 100%;
    top: 100%;
    display: flex;
    align-items: center;
}

.pr2-r-item:hover .info {
    background: rgba(42, 51, 66, 0.7);
    top: 50%;
    transform: translateY(-50%);
}

.pr2-r-item .pic img {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    transition: all 1s;
    /*鍥剧墖鏀惧ぇ杩囩▼鐨勬椂闂�*/
    position: relative;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;

}

.pr2-r-item .pic img:hover {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
}

.pr2-r-item:hover .tit_h5 {
    color: #fff;
}

.cate-title {
    width: 100%;
    height: 0.6rem;
    background: #748DC5;
    font-size: 0.24rem;
    font-family: Arial;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.6rem;
    padding-left: 0.4rem;

}

.product-list li {
    margin-bottom: 0.7rem;
}

.product-list .tit_h5 {
    font-size: 0.2rem;
    margin: 0;
    color: #666;
    text-align: left;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr2-r-item:hover .text {
    color: #fff;
}

.pr2-r-item .text {
    color: #333333;
    font-size: 0.18rem;
    padding: 0 0.5rem;
    padding-top: 0.2rem;
    margin-bottom: 0;
    line-height: 1.4;
    overflow: hidden;
    text-align: left;
    height: 100%;
    width: 100%;
    background: rgba(116, 141, 197, 0.75)
}

.pr2-r-item .text span {

    font-size: 0.18rem !important;
    font-family: Arial !important;
    font-weight: 400;
    text-decoration: underline;
    color: #FFFFFF !important;
    line-height: 0.53rem;
}

.pr2-r-item .text p:first-child {
    margin-top: 0;
}

.main {
    width: 70%;
    margin: 0 auto;
    padding: 1rem 0;
}

.cate-div>div {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.text-ellipsis {

    font-size: 0.2rem;
    font-family: Arial;
    font-weight: 400;
    color: #333333;
    line-height: 0.28rem;
}

.cp-item {
    display: flex;
}

.cp-item img {
    margin: 0 0.1rem;
}

.cp-item span {
    margin: 0 0.1rem;
}

.cate-text {
    width: 100%;
    height: auto;
    background: #F5F5F5;
    padding: 0.6rem 0.69rem;
    padding-top: 0.7rem;
    font-size: 0.2rem;
    font-family: Arial;
    font-weight: 400;
    color: #333333;
    line-height: 0.28rem;
}

.cate-img {
    width: 100%;
    height: auto;
    background: #F5F5F5;
    padding: 0.6rem 0.69rem;
    padding-top: 0.7rem;
    font-size: 0.2rem;
    font-family: Arial;
    font-weight: 400;
    color: #333333;
    line-height: 0.28rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cate-img img {
    width: 30%;
    padding-right: 0.6rem;
}

.but {
    width: 2.05rem;
    height: 0.61rem;
    border-radius: 0;
    background: #748DC5;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    font-size: 0.24rem;
    font-family: Arial;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 0.61rem;
    margin: 0 auto;
    margin-top: 0.2rem;
}

/* 鍒嗛〉 */
#news-lis {
    padding-top: 0.4rem;
    position: relative;
}

#news-lis li {
    width: 23.5%;
    height: 3.9rem;
    margin-top: 0.3rem;
    position: relative;
    float: left;
    margin-right: 2%;
}

#news-lis li a {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.newslist li .img {
    height: 80%;
    padding: .5rem 0;
    background-color: #fff;
    position: relative;
}

.newslist li .img .text {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 197, 229, .7);
    padding: 0 .3rem;
    opacity: 0;
}

.newslist li:hover .text {
    opacity: 1;
    transition: all .8s;
}

.newslist li .text .p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.newslist li .text p {
    font-size: .18rem;
    color: #fff;
    line-height: .3rem;
}

.newslist li .tit_h6 {
    font-size: .22rem;
    margin-top: .3rem;
    color: #666;
}

.newslist .paging {
    text-align: center;
    margin-top: 1rem;
}

.newslist .paging a {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width: .4rem;
    height: .4rem;
    padding: .12rem;
    border: .01rem solid #ccc;
    border-radius: 0.04rem;
    margin: 0 .5rem;
}

.newslist .paging a img {
    width: 100%;
    height: 100%;
    display: block;
}

.newslist .paging #curr-page {
    display: inline-block;
    width: .4rem;
    height: .4rem;
    text-align: center;
    line-height: .4rem;
    background-color: #2AA39E;
    font-size: .2rem;
    color: #fff;
    vertical-align: middle;
}

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

.cate-div::after {
    content: '';
    width: 33.33333333%;
    height: 0;
    display: block;
}

.com-head {
    margin: 0 1rem;
    width: 89.3%;
}


/*  com */
.com {
    padding: 0 0.3rem;
    height: 13.5rem;
    justify-content: space-between;
    width: 100%;
    background-size: 100% 100%;
    background-image: url("https://new.cdn.multi-masters.com/mjtrade/com-bg.png?imageslim");
    margin-top: 0.7rem !important;
}

.com-top,
.com-bot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    height: 66%;
}

.com-bot {
    height: 40%;
    align-items: flex-start;
}

.com-imge {
    width: 48%;
}

.com-imge img {
    width: 4.49rem;
}

.com-top .com-imge img {
    padding-top: 0.4rem;
}

.com-text {
    width: 48%;
}

.com-text span {

    font-size: 0.18rem;
    font-family: Arial;
    font-weight: 400;
    color: #666666;
    line-height: 0.3rem;
}

.com-text .tit_h3 {
    font-size: 0.28REM;
    font-family: Ebrima;
    font-weight: bold;
    color: #222E56;
    line-height: 0.4rem;

    padding-bottom: 0.2rem;
}

.com-text:first-child .tit_h3 {
    padding-top: 0.4rem;
}

.com-text p {
    font-size: .2rem;
    font-family: Arial;
    font-weight: 400;
    color: #666666;
    line-height: .35rem;
}

.com-text a {
    width: 2rem;
    height: 0.52rem;
}

.com-text a .but {
    border: 3px solid #CDCDCD;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    font-size: 0.2rem;
    font-family: Arial;
    font-weight: 400;
    color: #333333;
    line-height: 0.5rem;
    margin-top: 0.3rem;
    background: rgba(0, 32, 58, 0);
}

.main_top {
    padding: 0.5rem 3.1rem;
    word-wrap: break-word;
    font-family: Arial;
    text-align: center;
}

.main_top p {
    line-height: 36px;
}

@media screen and (min-width: 320px) and (max-width: 880px) {
    .main_top {
        padding: 0.5rem 4%;
    }

    .main_top p {
        line-height: 20px;
    }

    .banner {
        height: 5.8rem;
    }

    .banner-left p {
        display: none;
    }

    .banner ul {
        display: none;
    }

    .main p {
        line-height: 0.5rem;
    }

    .product-right-title a::after {
        width: 2.26rem;
    }

    .main {
        margin: 0 4%;
    }

    .but {
        width: 3rem;
        height: 1rem;
        line-height: 1rem;
    }

    .cate-title {
        height: 0.8rem;
        line-height: 0.8rem;
    }

    .disp {
        width: 100%;
    }

    .disp-left,
    .disp-right {
        width: 100%;
    }

    .disp-left img {
        float: left;
        width: 44% !important;
    }

    .disp-right img {
        width: 100%;
    }

    .disp-text p {
        width: 100%;
        padding-bottom: 2.8rem;
    }

    .mt-tabpage-title {
        padding: 0;
    }

    .mt-tabpage-title a {
        line-height: 0.5rem;
    }

    .pag-card {
        height: 6.8rem;
    }

    .option li .paging {
        width: 83%;
    }

    .pag-card img {
        width: 100%;
    }

    .page {
        width: 70%;
    }

    .category-right,
    .category-left {
        width: 100%;
    }

    .main {
        width: 92%;
    }

    .product-right-title::after {
        border: none;
    }

    .category-right {
        padding: 1rem 0;
    }

    .text-ellipsis {
        line-height: 0.5rem;
    }

    .cate-div>div {
        margin-top: 0.04rem;
    }

    .com {
        height: 20rem;
    }

    .com-top,
    .com-bot {
        height: auto;
        margin-top: 0.4rem;
    }

    .com-text a .but {
        line-height: 0.8rem;
    }
}