@import 'common.scss';

.content {
    width: 1210px;
    .banner {
        width: 100%;
        height: 300px;
        .slider {
            position: relative;
            .slider-main {
                .slider-panel {
                    position: absolute;
                }
            }
            .slider-nav {
                position: absolute;
                z-index: 2;
                top: 260px;
                left: 0;
                right: 0;
                width: 74px;
                height: 12px;
                margin: auto;
                padding: 2px;
                box-sizing: border-box;
                background: url(./i/nav.png) no-repeat center center;
                background-size: 100% 100%; 
                .slider-item {
                    width: 8px;
                    height: 8px;
                    margin: 0 3px;
                    background: url(./i/dot.png) no-repeat center center;
                    background-size: 100% 100%; 
                    &.slider-selected {
                        background: url(./i/dot-active.png) no-repeat center center;
                        background-size: 100% 100%; 
                    }
                }
            }
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
    .integral {
        margin-top: 24px;
        .title {
            .name {
                height: 36px;
                line-height: 36px;
                i {
                    float: left;
                    width: 18px;
                    height: 18px;
                    margin-top: 9px;
                    margin-right: 12px;
                    background: url(./i/title.png) no-repeat center center;
                    background-size: 100%;
                }
                span {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .go-detail {
                margin-left: 25px;
                line-height: 36px;
                color:rgba(153,153,153,1);
                i {
                    float: right;
                    margin-top: 7px;
                    margin-left: 12px;
                    width:23px;
                    height:23px;
                    background: url(./i/right-arrow.png) no-repeat center center;
                    background-size: 100%;
                }
                span {
                    font-size: 12px;
                }
            }
            .btns {
                li {
                    width:94px;
                    height:36px;
                    margin-left: 10px;
                    text-align: center;
                    line-height: 36px;
                    border-radius:18px;
                    border:1px solid rgba(237,50,42,1);
                    box-sizing: border-box;
                    a {
                        color: rgba(237,50,42,1);
                        font-size: 14px;
                    }
                }
                li {
                    position: relative;
                    appearance: none;
                    cursor: pointer;
                    overflow: hidden;
                    a {
                      position: relative;
                      transition: all 0.3s;
                      z-index: 1;
                    }
                   
                    &::before {
                      --size: 0;  
                   
                      content: '';
                      position: absolute;
                      left: var(--x);
                      top: var(--y);
                      width: var(--size);
                      height: var(--size);
                      background: radial-gradient(circle closest-side, #f72359, transparent);
                      transform: translate(-50%, -50%);
                      transition: width .2s ease, height .2s ease;
                    }
                    &:hover a {
                        color: white;
                    }
                    &:hover {
                        background: #e77a7a ;
                        a {
                            color: white \9;
                        }
                    }
                    &:hover::before {
                      --size: 400px;
                    }
                  }
            }
        }
        .integral-content {
            width: 1226px;
            margin-top: 12px;
            .integral-card {
                width: 593px;
                height: 167px;
                margin-right: 20px;
                color: #ffffff;
                transition: all 0.3s;
                &:hover {
                    transform: translateY(-5px);
                }
                .type {
                    margin: 28px 0 25px 41px;
                    font-size: 18px;
                    font-weight: bold;
                    i {
                        float: left;
                        margin: 5px 7px;
                        width: 10px;
                        height: 10px;
                        background: url(./i/dot.png) no-repeat center center;
                        background-size: 100% 100%;
                    }
                }
                .detail {
                    margin-top: 25px;
                    margin-left: 5px;
                    li {
                        margin: 0 33px;
                        p {
                            font-size: 28px;
                            margin-bottom: 8px;
                            font-weight: bold;
                        }
                        span {
                            font-size: 14px;
                        }
                    }
                    .ver {
                        width: 1px;
                        height: 46px;
                        border-right: 2px dotted #ffffff;
                    }
                }
            }
            .total {
                background: url(./i/total.png) no-repeat center center;
                background-size: 100% 100%;
            }
            .use {
                background: url(./i/use.png) no-repeat center center;
                background-size: 100% 100%;
            }
        }
    }
    .message {
        width: 493px;
        margin-top: 28px;
        .title {
            .name {
                height: 36px;
                line-height: 36px;
                i {
                    float: left;
                    width: 18px;
                    height: 18px;
                    margin-top: 9px;
                    margin-right: 12px;
                    background: url(./i/title.png) no-repeat center center;
                    background-size: 100%;
                }
                span {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .go-detail {
                margin-left: 25px;
                line-height: 36px;
                color:rgba(153,153,153,1);
                i {
                    float: right;
                    margin-top: 7px;
                    margin-left: 12px;
                    width:23px;
                    height:23px;
                    background: url(./i/right-arrow.png) no-repeat center center;
                    background-size: 100%;
                }
                span {
                    font-size: 12px;
                }
            }
        }
        .message-content {
            width: 100%;
            height: 230px;
            padding: 26px 0 26px 33px;
            // box-shadow:0px 2px 12px 2px rgba(0,0,0,0.06);
            box-sizing: border-box;
            li {
                height: 19px;
                margin-bottom: 11px;
                cursor: pointer;
                &:hover {
                    i {
                        background: url(./i/Rectangle2.png) no-repeat center center;
                        background-size: 100%;
                    }
                    .name {
                        color: #ED322A;
                    }
                }
                i {
                    width: 4px;
                    height: 100%;
                    margin-right: 7px;
                    background: url(./i/Rectangle1.png) no-repeat center center;
                    background-size: 100%;
                    transition: all 0.3s;
                }
                .name {
                    width: 264px;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    font-size: 14px;
                    color:rgba(51,51,51,1);
                    transition: all 0.3s;
                }
                .time {
                    margin-right: 14px;
                    color:rgba(153,153,153,1);
                    font-size: 12px;
                }

            }
        }
    }
    .care {
        width: 716px;
        margin-top: 28px;
        .title {
            margin-left: 20px;
            .name {
                height: 36px;
                line-height: 36px;
                i {
                    float: left;
                    width: 18px;
                    height: 18px;
                    margin-top: 9px;
                    margin-right: 12px;
                    background: url(./i/title.png) no-repeat center center;
                    background-size: 100%;
                }
                span {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .calendar {
                color:rgba(102,102,102,1);
                i {
                    float: left;
                    width: 17px;
                    height: 17px;
                    margin-right: 12px;
                    background: url(./i/calendar.png) no-repeat center center;
                    background-size: 100%;
                }

            }
        }
        .care-content {
            .festival {
                width: 338px;
                height: 230px;
                padding: 14px;
                margin-left: 20px;
                // box-shadow:0px 2px 12px 2px rgba(0,0,0,0.05);
                color: rgba(237,50,42,1);
                box-sizing: border-box;
                transition: all 0.3s;
                &:hover {
                    transform: translateX(5px);
                    box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.1);
                }
                .detail {
                    padding: 63px 0 0 30px;
                    .time {
                        height: 14px;
                        line-height: 14px;
                        font-size: 12px;
                        i {
                            width: 14px;
                            height: 14px;
                            margin-right: 6px;
                            background: url(./i/time.png) no-repeat center center;
                            background-size: 100%;
                        }
                    }
                    .date {
                        margin-top: 23px;
                        font-weight: bold;
                        font-size: 20px;
                    }
                    .name {
                        height: 24px;
                        margin-top: 8px;
                        line-height: 24px;
                        font-size: 18px;
                    }
                }
                .img {
                    width: 186px;
                    height: 186px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

            }
        }
    }
    .welfare {
        margin-top: 24px;
        .title {
            .name {
                height: 36px;
                line-height: 36px;
                i {
                    float: left;
                    width: 18px;
                    height: 18px;
                    margin-top: 9px;
                    margin-right: 12px;
                    background: url(./i/title.png) no-repeat center center;
                    background-size: 100%;
                }
                span {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
            .go-detail {
                margin-left: 25px;
                line-height: 36px;
                color:rgba(153,153,153,1);
                i {
                    float: right;
                    margin-top: 7px;
                    margin-left: 12px;
                    width:23px;
                    height:23px;
                    background: url(./i/right-arrow.png) no-repeat center center;
                    background-size: 100%;
                }
                span {
                    font-size: 12px;
                }
            }
        }
        .welfare-content {
            width: 1210px;
            margin-top: 19px;
        }
    }
}