/* Բ������ */

        .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;

            }

        }