union_wx/newAbout/css/price.css

.price .versions>li {
    padding-top: 54px;
    padding-bottom: 37px;
    text-align: center;
    font-size: 22px;
    font-weight: 700
}

.price .versions .col828282 {
    color: #828282
}

.price .versions .col569FFF {
    color: #569fff
}

.price .versions .col4842FF {
    color: #4842ff
}

.price .section {
    margin-bottom: 170px!important;
    border-bottom: 1px solid #c1d7ff
}

.price .section_chunk {
    border-right: 1px solid #c1d7ff
}

.price .section_chunk h2 {
    color: #fff;
    font-size: 16px;
    padding-left: 47px;
    line-height: 50px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABI8AAAABCAYAAABXAI65AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGoSURBVFhH7cbXVlRBEEZhX0MxIIpZMKGCAcyiYkYkSs455zgEIyjo43bz95yudWrVVM944YUX5+Jbex842GxsIpFI/G8OBeR5hwOOMEcVx1oy5QvHSWvUAjSbE4qTbZkKmVMBp9sjZwLOMuc6gOqd/wsXnM7YRUURU9wFrvRwSXGZudLt8Yer3rVceowtUVxX3BBuCqWKsl4PfwuVbivucH26u1451x9/BZ7cU9wnAx7+Aco9FB4pHg9m94QbivrUwTuVAc/IsLHPHXy63gumSvGSjIS9El6Pgis9vGHeKt4p3jPVAR/ImLE1OXykjkfv1OKlOqHemfDwDajUyDQpPk1mag6Zir8FT1oVbWTa2HZw70o6FJ1ClzMT61b0cLPioVfRx/QHDDCDiiEyZ+wwUMmIYnQeXOmFMcX4goefQKVJxRQzvaibYWbJknhvjpXMk2UPv4Byi8KSYnkltqJY5Vajrjn4bFJkzdh1B5+ut8FssnJbwmfhi/A1Ba708C2H7+se+x/MdsAO2TD2p+IXs0vdjD4Nvyf81mx5+D9oIpFI/As7KWP3AWjyqnZ8il52AAAAAElFTkSuQmCC) repeat-y;
    font-weight: 700
}

.price .section_chunk li {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    color: #203152;
    line-height: 50px;
    height: 50px;
    padding-left: 47px;
    border-left: 1px solid #c1d7ff
}

.price .section_chunk li .msg {
    display: inline-block;
    border-radius: 6px;
    color: #fff;
    line-height: 24px;
    font-size: 12px;
    padding: 0 12px;
    margin-left: 10px
}

.price .section .bg-yes {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAASCAYAAAHDFaW4AAAAAXNSR0IArs4c6QAAAlxJREFUOBGVVL1rFEEUf28yexHjWXjETrw1JwoKATXEQiFFKhWxU1FIYauNf8Bm7sSAFn7VWmkhKQQFQTBgLNXY+NFY3J7aqBCbmJC92d3xvT1mv85Dboqd9/u933vz9s0HQH40lJ7JY6h7XVMg3Hn9LiH6PAWZBVYlmbAAhTPpK0Qr6psLHtfTLwzCKNSVvsVSIpbqnt5gW6KB45zXgIFOq5JFuvPdh6ywI/NYpjTXvfAsQPwYEZeSckv+BLpe9ws1ZC9i/MFv9pZDIleIPMwKKZxdURyep3puMi7URDgtgxr50hgzyyJacsVvOlNsDz32qPBEmnVQNPXsF5U0PlB4QJlt67Fe4wQ14Yz9UzihzM4o1j9ZNCac6meFfwRtRcjRTPIgu2JFKGCaRcwLADPCS1DAEybIDhKHwLu+qrxlmwdShh3kXO3B3hcBA7/lbMlzglL/5mLz5JyQW/OY7fRnZpSRnVhryvaUsp0ZKCw7hsH7F0wtCPQdOpMXae31dPVhkrCWq/0K+r6JYc7GUuWvq1V5cuikvHexCZ/TmTtik1F1r2pCnnqvMLlNSE6cuAYH2x5+zET91r4bphps6GW6dIdSL+IPgXK6rfBbypGBfBN7vSAA8B2EuOwr+SwvclX3Ef3mhYxDgwLPkW4x4zILGwtmPNqkKwQwmdG8AK7Ra/GAKrvCB8766LX5tBudqWWFm5Yrz2lPG8psj3q9OlYWWUzH+Wq7Vblt8aA5TWoFjXtmNFoNF6nXpy2XzBKOdrzKmwI3APQltTreQLcZXqdn8RKOyNn/baSN4/kvah/t+gJORKwAAAAASUVORK5CYII=) no-repeat 50%
}

.price .section .bg-no {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAArSURBVBhXYzhz/sr/devW/1+7di1FGGQGyCyGDRs2YlVADgaZRWUXXvkPANlHty0j3Q4HAAAAAElFTkSuQmCC) no-repeat 50%
}

.price .section .bgEEF4FF {
    background-color: #eef4ff
}

.price .section .bgFF886C {
    background-color: #ff886c
}

.price .section .bg55B95E {
    background-color: #55b95e
}

.price .w340 {
    float: left;
    width: 340px
}

.price .w274 {
    float: left;
    width: 274px
}

.price .w1167 {
    width: 1167px;
    margin: 0 auto
}

.price .pkg-box {
    margin-top: 20px
}

.price .section-title {
    font-size: 16px;
    font-weight: 700;
    color: #414141;
    line-height: 40px;
    margin-bottom: 20px
}
.price .meal-list {
    text-align: center;
}
.price .meal-list,.price .meal-list .meal-li {
    margin-bottom: 20px;
    overflow: hidden
}

.price .meal-list .meal-li {
    width: 270px;
    height: 300px;
    display: inline-block;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fff;
    margin-right: 40px;
    padding: 40px 0 25px 0;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center
}

.price .meal-list .meal-li:last-child {
    margin: 0
}

.price .meal-list .meal-li:hover {
    -webkit-box-shadow: 0 0 10px hsla(0,0%,62.7%,.2);
    box-shadow: 0 0 10px hsla(0,0%,62.7%,.2)
}

.price .meal-list .meal-li .title {
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: 20px
}

.price .meal-list .meal-li .flow {
    font-size: 14px;
    line-height: 24px;
    color: #212121
}

.price .meal-list .meal-li .hint {
    font-size: 14px;
    color: #b3b3b3;
    margin-bottom: 20px
}

.price .meal-list .meal-li .unit-price {
    margin-bottom: 22px
}

.price .meal-list .meal-li .unit-price .price {
    position: relative;
    font-size: 42px;
    color: #175efc;
    line-height: 60px
}

.price .meal-list .meal-li .unit-price .price:before {
    position: absolute;
    content: "\FFE5";
    font-size: 12px;
    color: #175efc;
    top: -12px;
    left: -12px
}

.price .meal-list .meal-li .unit-price .unit {
    font-size: 12px;
    color: #414141;
    line-height: 17px;
    vertical-align: text-bottom
}

.price .meal-list .meal-li .btn {
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #999;
    border-radius: 4px;
    color: #414141;
    line-height: 40px;
    font-size: 14px;
    text-align: center
}

.price .meal-list .meal-li.active {
    position: relative;
    background: #f6fafd;
    border-color: #f6fafd
}

.price .meal-list .meal-li.active:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #175efc
}

.price .meal-list .meal-li.active .btn {
    background: -webkit-gradient(linear,left top,right top,from(#175ffe),to(#9487fe)) no-repeat;
    background: linear-gradient(90deg,#175ffe,#9487fe) no-repeat;
    color: #fff;
    border: none
}

.price .meal-list .meal-li.disabled {
    position: relative;
    background: #f6f6f6;
    border-color: #ddd;
    cursor: no-drop
}

.price .meal-list .meal-li.disabled .unit-price .price,.price .meal-list .meal-li.disabled .unit-price .price:before {
    color: #c5c8ce
}

.price .meal-list .meal-li.disabled:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #adadad
}

.price .meal-list .meal-li.disabled .btn {
    background: #f7f7f7;
    color: #c5c8ce;
    border-color: #dcdee2;
    cursor: no-drop
}