/* 圆形容器 */
        .holderCircle {
            width: 800px;
            height: 800px;
            border-radius: 100%;
            margin: 60px auto;
            position: relative;
            left: -300px;
        }

        /* 外围圆点容器 */
        .dotCircle {
            width: 100%;
            height: 100%;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 100%;
            z-index: 20;
        }

        /* 外围圆点样式 */
        .dotCircle .itemDot {
            display: block;
            width: 80px;
            height: 80px;
            position: absolute;
            background: #ddd;
            color: #fff;
            border-radius: 100%;
            text-align: center;
            line-height: 80px;
            font-size: 30px;
            z-index: 3;
            cursor: pointer;
            background-size: 80px 80px;
            transition: all 0.3s ease;
        }

        .dotCircle .itemDot:hover {
            transform: scale(1.1);
        }

        /* 草绿色描边 */
        .dotCircle .itemDot::after {
            content: "";
            width: 86px;
            height: 86px;
            position: absolute;
            border-radius: 100%;
            top: -3px;
            left: -6px;
            right: 0;
            bottom: 0;
            margin: auto;
            z-index: 2;
            border: 3px solid #9ACD32;
            box-shadow: 0 0 8px rgba(154, 205, 50, 0.5);
        }

        .dotCircle .itemDot.active::after {
            border: 3px solid #ADFF2F;
            box-shadow: 0 0 15px rgba(154, 205, 50, 0.8);
        }

        .dotCircle .itemDot .forActive {
            width: 56px;
            height: 56px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: none;
        }

        .dotCircle .itemDot.active .forActive {
            display: block;
        }

        /* 10个外围圆点背景图 */
        .dotCircle .itemDot1 { background: url(../img/1.gif) no-repeat; background-size: 80px 80px; top: 0; left: 360px; }
        .dotCircle .itemDot2 { background: url(../img/2.gif) no-repeat; background-size: 80px 80px; top: 70px; left: 620px; }
        .dotCircle .itemDot3 { background: url(../img/3.gif) no-repeat; background-size: 80px 80px; top: 220px; left: 760px; }
        .dotCircle .itemDot4 { background: url(../img/4.gif) no-repeat; background-size: 80px 80px; top: 420px; left: 780px; }
        .dotCircle .itemDot5 { background: url(../img/5.gif) no-repeat; background-size: 80px 80px; top: 600px; left: 700px; }
        .dotCircle .itemDot6 { background: url(../img/6.gif) no-repeat; background-size: 80px 80px; top: 720px; left: 540px; }
        .dotCircle .itemDot7 { background: url(../img/7.gif) no-repeat; background-size: 80px 80px; top: 740px; left: 340px; }
        .dotCircle .itemDot8 { background: url(../img/8.gif) no-repeat; background-size: 80px 80px; top: 680px; left: 140px; }
        .dotCircle .itemDot9 { background: url(../img/9.gif) no-repeat; background-size: 80px 80px; top: 540px; left: 20px; }
        .dotCircle .itemDot10 { background: url(../img/10.gif) no-repeat; background-size: 80px 80px; top: 340px; left: 0px; }

        /* 中间大图容器 */
        .contentCircle {
            width: 500px;
            height: 500px;
            color: #fff;
            position: relative;
            top: 150px;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

        /* 中间大图样式 - 草绿色边框 */
        .contentCircle .CirItem {
            border-radius: 100%;
            color: #fff;
            position: absolute;
            text-align: center;
            bottom: 0;
            left: 0;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            font-weight: bold;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            margin: auto;
            background: rgba(0, 0, 0, 0.6);
            border: 5px solid #9ACD32;
            box-shadow: 0 0 20px rgba(154, 205, 50, 0.4);
            overflow: hidden;
        }

        .contentCircle .CirItem img {
            border-radius: 100%;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .CirItem.active {
            z-index: 1;
            opacity: 1;
            transform: scale(1);
        }

        /* 顶部中间文本框 */
        .center-text-box {
            position: absolute;
            top: 25px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 30;
            text-align: center;
            pointer-events: none;
        }

        .center-title {
            display: inline-block;
            padding: 12px 28px;
            background: linear-gradient(135deg, rgba(154, 205, 50, 0.95), rgba(124, 175, 30, 0.95));
            color: #fff;
            font-size: 22px;
            font-weight: bold;
            letter-spacing: 4px;
            border-radius: 50px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 15px rgba(154, 205, 50, 0.5);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(154, 205, 50, 0.8);
            font-family: "Microsoft YaHei", "楷体", "KaiTi", serif;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            white-space: nowrap;
        }

        /* 响应式适配 */
        @media only screen and (min-width: 300px) and (max-width: 899px) {
            .holderCircle {
                width: 400px;
                height: 400px;
                left: 0;
                margin: 40px auto;
                transform: scale(0.9);
            }
            
            .dotCircle .itemDot {
                width: 45px;
                height: 45px;
                background-size: 45px 45px !important;
            }
            
            .dotCircle .itemDot::after {
                width: 51px;
                height: 51px;
            }
            
            .dotCircle .itemDot1 { top: 0; left: 178px; }
            .dotCircle .itemDot2 { top: 35px; left: 310px; }
            .dotCircle .itemDot3 { top: 110px; left: 380px; }
            .dotCircle .itemDot4 { top: 210px; left: 390px; }
            .dotCircle .itemDot5 { top: 300px; left: 350px; }
            .dotCircle .itemDot6 { top: 360px; left: 270px; }
            .dotCircle .itemDot7 { top: 370px; left: 170px; }
            .dotCircle .itemDot8 { top: 340px; left: 70px; }
            .dotCircle .itemDot9 { top: 270px; left: 10px; }
            .dotCircle .itemDot10 { top: 170px; left: 0px; }
            
            .contentCircle {
                width: 250px;
                height: 250px;
                top: 75px;
            }
            
            .center-title {
                font-size: 12px;
                padding: 6px 14px;
                letter-spacing: 2px;
            }
            
            .center-text-box {
                top: 12px;
            }
        }

        @media only screen and (min-width: 900px) and (max-width: 1300px) {
            .holderCircle {
                left: -100px;
            }
        }