﻿#g_web .main {
    width: 100%;
    height: 100vh;
    position: relative;
    /*width: 100vw;
    height: 100vh;
    position: relative;*/
    overflow: hidden;
}

#webHeader {
    height: 3rem;
    overflow: visible;
    background-color: rgba(255,255,255,0.95);
    z-index: 100;
}

/*#PageIndex {
    top: 0;
    bottom:0;
    background-color: #fff;
}*/
    #PageIndex.ft {
       bottom:3rem;
    }
#webFooter {
    overflow: visible;
}

/*@font-face {
    font-family: 'PingFang';
    src: url('/Content/fonts/PingFang Medium.ttf') format('truetype');
}*/

* {
    font-family: Helvetica Neue;
}
/*公用样式*/
.fl {
    float: left;
}

.fr {
    float: right;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.h-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.v-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.algin {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.around {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.end {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.wrap-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/***************************************************/

/*立即购买*/
#webFooter .btnGroup {
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
    border-top: 1px #f3f3f3 solid;
}

    #webFooter .btnGroup li {
        width: 50%;
        height: 100%;
    }

        #webFooter .btnGroup li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 2.5rem;
            text-align: center;
            font-size: 0.8rem;
        }

    #webFooter .btnGroup a.buyBtn {
        background: url(/Content/images/bg-buyBtn.png) no-repeat center;
        background-size: 100% 100%;
        color: #fff;
    }


/*文交中心-模态框*/
.modalBox {
    /*display: none;*/
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0,0,0,0.5);
    z-index: 100;
    display: none;
}

    .modalBox .modalContent {
        position: absolute;
        width: 17rem;
        height: 18rem;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        border-radius: 1rem;
        overflow: hidden;
    }

    .modalBox .modalHeader {
        line-height: 3rem;
        text-align: center;
        font-size: 0.85rem;
        color: #fff;
        background: url('/Content/images/bg-box-intr.png') no-repeat center;
        background-size: 100% 100%;
    }

    .modalBox .modalBody {
        background: #fff;
    }
/*置换弹窗*/
.exchangeModal {
    position: absolute;
    width: 17rem;
    height: 18rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 1rem;
    overflow: hidden;
    background: url('/Content/images/bg-box.png') no-repeat center;
    background-size: 100% 100%;
    display: none;
}

    .exchangeModal .proExchange {
        width: 100%;
        padding: 2.5rem 0.5rem;
    }

        .exchangeModal .proExchange .proPic {
            width: 5.5rem;
            height: 6.5rem;
            position: relative;
            border-radius: 0.2rem;
            overflow: hidden;
        }

            .exchangeModal .proExchange .proPic img {
                position: absolute;
                transform: translate(-50%,-50%);
                top: 50%;
                left: 50%;
                max-height: 6rem;
                max-width: 6rem;
                margin-right: 0.5rem;
            }

        .exchangeModal .proExchange .proContent {
            width: 9rem;
        }

            .exchangeModal .proExchange .proContent .proIntro p {
                font-size: 0.6rem;
                color: #fff;
                line-height: 1.3rem;
            }

                .exchangeModal .proExchange .proContent .proIntro p.pro_Name {
                    font-size: 0.8rem;
                    line-height: 1.6rem;
                }

            .exchangeModal .proExchange .proContent .exchangeAction {
                padding-left: 2rem;
                padding-top: 0.8rem;
            }

                .exchangeModal .proExchange .proContent .exchangeAction p {
                    height: 1.5rem;
                    font-size: 0.6rem;
                }

                    .exchangeModal .proExchange .proContent .exchangeAction p label {
                        color: #000;
                    }

                    .exchangeModal .proExchange .proContent .exchangeAction p.ExchangeNum a {
                        display: block;
                        width: 1rem;
                        height: 1rem;
                        line-height: 1rem;
                        text-align: center;
                        background-color: #F3F3F3;
                        color: #C5C3C3;
                        border-radius: 0.2rem;
                        margin: 0 0.5rem;
                        font-size: 0.65rem;
                    }

                    .exchangeModal .proExchange .proContent .exchangeAction p.ExchangeNum .num {
                        display: block;
                        width: 1.5rem;
                        height: 1rem;
                        line-height: 1rem;
                        text-align: center;
                        font-size: 0.65rem;
                    }

                    .exchangeModal .proExchange .proContent .exchangeAction p.exchangeCount span {
                        color: #E02727;
                    }
    /*置换按钮*/
    .exchangeModal .ExchangeBtn {
        width: 12rem;
        height: 1.5rem;
        line-height: 1.5rem;
        border-radius: 0.2rem;
        background-color: #2A92FC;
        color: #fff;
        text-align: center;
        font-size: 0.7rem;
        margin: 1rem auto;
    }
    /*温馨提示*/
    .exchangeModal .warmPrompt {
        font-size: 0.6rem;
        text-align: center;
        color: #777778;
    }
    /*关闭按钮*/
    .exchangeModal .closeBtn {
        position: absolute;
        width: 2.2rem;
        height: 2.2rem;
        line-height: 2.2rem;
        text-align: center;
        top: 0;
        right: 0;
        font-size: 1.5rem;
        color: #fff;
    }
