.my-list-bg{
    background: url(../imgxin/m-gr-bluebg.png);
    background-size: 100% 100%;
    width: 160px;
    height: 40px;
}

@media (max-width:500px){
    .my-list-bg{
        width: 120px;
        height: 30px;
    }
}

.myitem:nth-of-type(1) .my-list-bg{
    background: url(../imgxin/m-gr-goldbg.png);
    background-size: 100% 100%;
    color: #6A4D00 !important;
}

.myitem:nth-of-type(2) .my-list-bg{
    background: url(../imgxin/m-gr-silverbg.png);
    background-size: 100% 100%;
    color: #46546F !important;
}
 
.myitem:nth-of-type(3) .my-list-bg{
    background: url(../imgxin/m-gr-copperbg.png);
    background-size: 100% 100%;
    color: #722800 !important;
}

@media (min-width:500px) {
    .myitem:nth-of-type(3n+2){
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .myitem2:nth-of-type(3n+2){
        padding-left: 16px;
        padding-right: 16px;
    }
}
.shapebox{
    background: linear-gradient(180deg, #F7FFF1 0%, #FFFFFF 41%, #FFFFFF 100%);
    height: 550px;
    top: 295px;
}

.zongcolor{
    color: #FFFFFF;
}


@media (min-width:1024px) and (max-width: 1250px){
    .czw-my-width{
       width: 100% ; 
    }
    }
    
    @media  (min-width: 1250px){
        .czw-my-width{
            width: 50% ; 
         }
    }
    
    @media  (max-width: 1024px){
        .czw-my-width{
            width: 100% ; 
         }
    }

.tjactive{
    color: #4097F4;
    background: #E0EFFF !important;
}

.tjactive .myshow{
    display: block;
}

.tjnav:hover{
    background: #EFEFEF;
}

.tjnav:hover .myunshow{
    display: block;
}

.myshow{
    z-index: 6;
    display: none;
}

.myunshow{
    z-index: 5;
    display: none;
}

@media(max-width:500px){
    .tjactive .myshow{
        display: none;
    }
    
    .tjnav:hover .myunshow{
        display: none;
    }

    .mnav{
        left: 68px;
        transition: all 0.5s;
    }

    .tjactive{
        background: #fff !important;
    }
}