/*网站模板样式*/
#template {
    gap: 40px;
    width: 100%;
   
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    list-style: none;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
}
    /*电脑端样式*/
    #template .pcwp_m {
        width: 309px;
        position: relative;
        margin: 0 auto;
        background: url(../img/tem_7.png) no-repeat 0 top;
    }

        #template .pcwp_m a {
            display: block;
            position: relative;
        }

        #template .pcwp_m .eye-icon-bg {
            z-index: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 309px;
            height: 233px;
            background-color: #198ede;
            opacity: 0.6;
            display: none;
        }

        #template .pcwp_m a img {
            width: 309px;
            height: 233px;
        }

        #template .pcwp_m .eye-icon-bg {
            z-index: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 309px;
            height: 233px;
            background-color: #198ede;
            opacity: 0.6;
            display: none;
        }

        #template .pcwp_m .eye-icon {
            z-index: 1;
            width: 108px;
            height: 110px;
            background: url(../img/jz-18.png) no-repeat;
            display: block;
            position: absolute;
            left: 50%;
            margin-left: -54px;
            top: 50%;
            margin-top: -55px;
            display: none;
        }
        #template .pcwp_m .tex{
            margin-top:2rem;
        }
#template .pcwp_m .fr{
    display:none;
}
/*电脑端样式*/
/*手机模板样式*/
#template .pcwp {
    width: 109px;
    height: 218px;
    background: url(../img/tem_9.png) no-repeat;
    position: absolute;
    top: 40px;
    right: 10px;
    z-index: 2;
}

        #template .pcwp img {
            width: 99px;
            height: 175.5px;
            margin: 13px 0 0 5px;
        }

        #template .pcwp .eye-icon {
            z-index: 1;
            width: 80px;
            height: 80px;
            background: url(../img/jz-17.png) no-repeat;
            margin-left: -40px;
            margin-top: -70px;
        }

        #template .pcwp .eye-icon-bg {
            top: 14px;
            left: 5px;
            width: 99px;
            height: 176px;
            z-index: 0;
            position: absolute;
            background-color: #198ede;
            opacity: 0.6;
            display: none;
        }

        #template .pcwp .eye-icon {
            z-index: 1;
            width: 80px;
            height: 80px;
            background: url(../img/jz-17.png) no-repeat;
            margin-left: -40px;
            margin-top: -70px;
            position: absolute;
            left: 50%;
            top: 50%;
            display: none;
        }

        #template .pcwp .eye-icon2 {
            z-index: 100;
            width: 80px;
            height: 90px;
            background: url(../images/2.png) no-repeat center center;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -38px;
            margin-top: -20px;
            display: none;
        }

        #template .pcwp .eye-icon-text {
            text-align: center;
            line-height: 30px;
            border: 1px solid #fff;
            border-radius: 20px;
            z-index: 1;
            width: 80px;
            height: 30px;
            color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -40px;
            margin-top: 20px;
            display: none;
            cursor:pointer;
        }

        #template .pcwp .eye-icon-text1 {
            text-align: center;
            line-height: 30px;
            border: 1px solid #fff;
            border-radius: 20px;
            z-index: 1;
            width: 80px;
            height: 30px;
            color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -40px;
            margin-top: -60px;
            display: none;
        }

/*手机模板样式*/

#templateClassification{
    gap:5px;
}
    #templateClassification a {
        /*height: 33px;
        line-height: 33px;*/
        color: #535353;
        text-align: center;
        padding: 0 12px;
        border: 1px solid #dcdcdc;
        margin-right: 15px;
       /* margin-bottom: 10px;*/
        float: left;
        border-radius: 5px;
        font-size: 12px;
        cursor: pointer;
    }

.fs-8 {
    font-size: 12px;
  
    display: flex;
    justify-content: center;
   
    align-items: center;
}
.Classification {
   list-style:none;
   margin:0;
   padding:0;
   gap:18px;
  
}
    .Classification a {
        border: 1px solid #dcdcdc;
        border-radius: 5px;
        font-size: 12px;
        display:flex;
        justify-content:center;
        align-items:center;
        padding:10px 20px;
        text-decoration:none;
        color:gray;
        
    }
        .Classification a:hover {
            color: white;
            background-color: var(--bs-purple);
        }
    .Classification .active, #templateClassification .active {
        color: white;
        background-color: var(--bs-purple);
    }
    .swatch-purple {
        background: linear-gradient(225deg, #6675F7 0%, #57007B 100%);
        color: #fff;
        font-size: 15px;
    }
    .swatch-purple:hover {
        background: linear-gradient(225deg, #6675F7 0%, #57007B 100%);
        color: #fff;
        opacity:0.8;
    }