﻿/*vip模块*/
.row{display: flex; flex-direction:row; justify-content : space-between}
.row > .col{display: block;width:100%; }
h2{font-size:24px; font-weight: 400; height:50px; margin:10px 0 0;}
.box-shadow{box-shadow:0 0 20px rgba(0,0,0,0.15);}

.vip-detail .text-red{color:#e15727; font-size:16px;}
.vip-detail .text-price:before{ content:'￥'; font-size: 13px;}
.vip-detail .vip-table .text-red{font-size:20px; font-weight: bold;}
.vip-detail .text-unit{ font-size: 13px;}
.vip-detail .text-unit:before{ content:'/ ';}
.vip-detail .btn{display: inline-block; background-color: #ff910d; color:#fff; font-size: 16px; padding:8px 30px; line-height: 1; border-radius: 3px;}

.vip-package{ margin-bottom:30px;}
.vip-package .item{ position: relative; display: block; height: 230px; border:1px solid #eee; margin-right:20px; padding:20px; background-color: #fff; border-radius:3px;}
.vip-package > .col:last-child .item{margin-right: 0;}
.vip-package .item-name{font-size: 22px; color: #333; height: 40px;}
.vip-package .item-remark{font-size: 13px; color:#555; line-height: 2;}
.vip-package .item-price{border-top:1px dashed #ddd; margin-top:15px; padding-top:15px;}
.vip-package .item-button{ position: absolute; z-index: 1; width:100%; left:0; bottom:20px; text-align: center;}

.vip-table{border-collapse: collapse; width: 100%; background-color: #fff;}
.vip-table td{font-size: 14px;  border:1px solid #eee; line-height: 2; min-height:50px; padding:8px 15px; box-sizing: border-box; color: #555;}
.vip-table .ceicon{font-size: unset;}
.vip-table .td-group{width:100px; font-weight: bold; color:#000; text-align: center; padding:8px 0;}
.vip-table .td-name{font-weight: bold; color:#333; position: relative;}
.vip-table .td-name .btn-remark{ position:absolute; margin:5px 0 0 0; cursor: pointer;}
.vip-table .td-vip{width:200px; text-align: center; }
.vip-table .tr-header td{ background-color: #fafafa; font-size: 16px;}
.vip-table .tr-button td{padding:15px 5px;}
.vip-table tr:hover td:not(.td-group){background-color: #f8f8f8;}

.help{background-color: #fff; margin-top:40px; border-radius:5px; padding:20px; text-align: center; }
.help h2{font-size:24px; font-weight: bold; line-height: 2; padding: 10px 0; margin:0 0 10px; background-color: #eee;}

@media screen and (max-width: 500px) {
    .vip-detail{margin:20px 0 0;}
    .box-shadow{box-shadow:0 0 10px rgba(0,0,0,0.15);}
    .help{background-color: #fff; margin:30px 10px 0; border-radius:5px; padding:10px; text-align: center; }
    .help h2{font-size:18px; font-weight: bold; line-height: 2; padding: 10px 0; margin:0 0 10px; background-color: #eee;}

    .w1200{ overflow: auto; }
    .w1200 .vip-package{ width:900px;}
    h2{font-size: 18px; font-weight: bold;  text-align: center; height: 40px; padding-left:10px;}
    .vip-detail .btn{font-size: 14px;}
    .vip-detail .vip-table .btn{display: block; padding:8px 0;}
    .vip-package{margin-bottom: 10px; padding-right: 10px;}
    .vip-package .item{padding: 15px; margin:10px; height: 210px; background-color: #fafafa;}
    .vip-package .col + .col .item{margin-left:0;}
    .vip-table .td-name .btn-remark{ position:absolute; margin:3px 0 0 0; cursor: pointer;}

    .w1200 .vip-table{ width:730px;}
    .vip-table td{ padding: 5px 10px; font-size: 12px;}
    .vip-table .td-group{width: 90px;}
    .vip-table .td-vip{width:120px;}
    .vip-detail .vip-table .text-red{font-size: 14px;}
    .vip-table .tr-button td{padding: 5px;}
}


.layui-layer-red .layui-layer-title{background-color: #e25625; color: #fff;}
.tpl-remark{text-align: center; font-size: 20px; line-height: 2;}
.tpl-remark img{ max-width: 100%; margin:0 auto;}