.container {display: flex;flex-direction: column;align-items: center;/* gap: 30px; *//* padding: 20px; */position:relative;margin: -60px auto;height: 800px;/* overflow: hidden; */}
.container-s{position:relative;width:800px;height:800px;}
.container-s:hover .p1{animation-play-state: paused!important;background: url(../images/index-tb10-1.png)no-repeat center;}
.container-s:hover .center-circle{animation-play-state: paused;background: url(../images/index-tb11-1.png)no-repeat center;}


.container-s:hover .banner{animation-play-state: paused;}
.container-s:hover .div1 .p2 img{opacity:0.3;}
.container-s:hover .div1 .i2{background:url(../images/index-tb-1.png)no-repeat center!important;}

.container.active .banner{animation-play-state: paused;}
.container.active .div1 .p2 img{opacity:0.3;}
.container.active .div1 .i2{background:url(../images/index-tb-1.png)no-repeat center!important;}
.active.container .p1{background: url(../images/index-tb10-1.png)no-repeat center;}
.active.container .center-circle{background: url(../images/index-tb11-1.png)no-repeat center;}

.instructions {background: rgba(255, 255, 255, 0.1);padding: 15px 20px;border-radius: 10px;color: white;max-width: 600px;text-align: center;backdrop-filter: blur(5px);border: 1px solid rgba(255, 255, 255, 0.2);}
.banner-container {position: relative;width: 800px;height: 800px;display: flex;justify-content: center;z-index: 10;align-items: center;transform: rotate(104.5deg);}
.banner {position: relative;width: 800px;height: 800px;border-radius: 50%;/* overflow: hidden; */transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);}
.container .p1{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;background: url(../images/index-tb10.png)no-repeat center;width:100%;height:100%;}
.container .p1.active{animation: rotate2 22s linear infinite;}
.container .p1 img{display:none;}        
.banner.active{animation: rotate 22s linear infinite;}
.banner.paused {animation-play-state: paused;}
.container-s .div1 {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: bottom right;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    z-index: 1;
    pointer-events: auto;
    border-top-right-radius: 100%;
    overflow: hidden;
    }
.container-s .div1 .p2{position: absolute;transform: rotate(-59.5deg);left: 131px;top: 220px;}
.container-s .div1 .p2 .i1{position:absolute;left:0;top:0;width:100%;height:100%;}
.container-s .div1:nth-child(1) .p2 .i1 img{
    height: 22px;
}
.container-s .div1:nth-child(2) .p2 .i1 img{height: 45px;}
.container-s .div1:nth-child(3) .p2 .i1 img{height: 45px;}
.container-s .div1:nth-child(4) .p2 .i1 img{height: 20px;}
.container-s .div1:nth-child(5) .p2 .i1 img{height: 19px;}
.container-s .div1:nth-child(6) .p2 .i1 img{height: 27px;}
.container-s .div1:nth-child(7) .p2 .i1 img{height: 23px;}
.container-s .div1:nth-child(8) .p2 .i1 img{height: 22px;}
.container-s .div1 .p2 .i2{display:block;width:210px;height:168px;background:url(../images/index-tb.png)no-repeat center;transition:all 0.5s;}

.container-s .div1 .p3{position: absolute;transform: rotate(-58.5deg);left: 128px;top: 262px;width: 159px;height: 49px;transition: all 0.5s;opacity: 0;}
.container-s .div1:hover .p3{opacity:1;}
.container-s .div1 .p3 i{position:absolute;left:0;top:0;width:100%;height:100%;}
.container-s .div1 .p3 img{display:block;max-width:500px;/* margin-top: -30px; *//* margin-bottom: 30px; */}
.container-s .div1 .p3>img{transform: translateY(-62px);height: 49px;}
.container-s .div1:nth-child(1) .p3>img{}
.container-s .div1:nth-child(2) .p3>img{
    transform: translateY(-62px) translateX(-29px);
}
.container-s .div1:nth-child(3) .p3>img{
    transform: translateY(-62px) translateX(-18px);
}
.container-s .div1:nth-child(4) .p3>img{}
.container-s .div1:nth-child(5) .p3>img{}
.container-s .div1:nth-child(6) .p3>img{
    transform: translateY(-62px) translateX(-29px);
}
.container-s .div1:nth-child(7) .p3>img{}
.container-s .div1:nth-child(8) .p3>img{}
.container-s .div1:hover {/* background: rgba(255, 255, 255, 0.9); */z-index: 10;/*transform: scale(1.05) !important;*//* box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); */z-index: 10 !important;}
.container-s .div1.active {/* background: rgba(255, 255, 255, 0.95); */z-index: 20;/* box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); */}
.container-s .div1.active .p3{display:none;} 
.container-s .div1 span {transform: rotate(22.5deg);font-weight: bold;color: #333;text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);margin-top: 80px;margin-right: 80px;font-size: 18px;pointer-events: none;}
        
.container-s .div1:nth-child(1) {transform: rotate(0deg);/* z-index:20; */}
.container-s .div1:nth-child(2) {transform: rotate(45deg);/* z-index:19; */}
.container-s .div1:nth-child(3) {transform: rotate(90deg);/* z-index:18; */}
.container-s .div1:nth-child(4) {transform: rotate(135deg);/* z-index:17; */}
.container-s .div1:nth-child(5) {transform: rotate(180deg);/* z-index:16; */}
.container-s .div1:nth-child(6) {transform: rotate(225deg);/* z-index:15; */}
.container-s .div1:nth-child(7) {transform: rotate(270deg);/* z-index:14; */}
.container-s .div1:nth-child(8) {transform: rotate(315deg);/* z-index:13; */}
.center-circle {position: absolute;width: 310px;height: 310px;border-radius: 50%;z-index: 10;display: flex;justify-content: center;align-items: center;font-weight: bold;color: #333;font-size: 20px;pointer-events: none;background: url(../images/index-tb11.png)no-repeat center;z-index:300;/* animation: rotate2 15s linear infinite; */}
        
@keyframes rotate {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}
@keyframes rotate2 {from { transform: rotate(360deg); }to { transform: rotate(0deg); }
} 
        
.controls {display: flex;gap: 15px;margin-top: 10px;}
.status {color: white;background: rgba(0, 0, 0, 0.3);padding: 12px 24px;border-radius: 20px;margin-top: 10px;font-size: 16px;}
.index2{position:absolute;width: 667px;/* background:rgba(255, 255, 255, 0.7); */z-index: 99;left:493px;top:166px;padding-right:48px;height: 466px;display:none;background:url(../images/index2-bj.png);background-size: 100% 100%;}
.index2-b{height: 466px;display:none;}
.index2-b.active{display:flex;}
.index2-l{}
.index2-l p{transform: rotate(90deg);}
.index2-l p img{display:block;margin-top: 18px;margin-right: -5px;}
.index2-l h3{font-size: 26px;color:var(--colors);}
.index2-r{width: 230px;}
.index2-r dl{margin-bottom:28px;}
.index2-r dl:last-child{margin-bottom:0;}
.index2-r dl dt{
    cursor: pointer;
}
.index2-r dl dt h3{font-size:20px;}
.index2-r dl dt p{width:16px;height:16px;background:url(../images/xl.png);transition:all 0.5s;background-size: 100%;}
.index2-r dl dt p.up{transform: rotate(180deg);}
.index2-r dl dd{display:none;overflow: auto;max-height: 290px;}
.index2-r dl dd::-webkit-scrollbar {
  width: 6px;
  height: 10px;
  background-color: #f5f5f5;
}
.index2-r dl dd::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
.index2-r dl dd::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555;
}
.index2-r dl dd p{margin-top:20px;cursor:pointer;position: relative;}
.index2-r dl dd p input{margin-right:8px;width:30px;height:26px;opacity: 0;}
.index2-r dl dd p i{display:block;position:absolute;left:0;top:0;width:30px;height: 26px;transition:all 0.5s;background:url(../images/index2-tb.png)no-repeat center;background-size: 100%!important;}
.index2-r dl dd p.active,.index2-r dl dd p:hover{color:var(--colors);font-weight:bold;}
.index2-r dl dd p.active i,.index2-r dl dd p:hover i{background:url(../images/index2-tb2.png)no-repeat center;}
.index2-c{cursor:pointer;width:30px;height:30px;position:absolute;right:8px;top:8px;background:url(../images/kfdz-tb.png);background-size: 100%;}

.index_db{padding:40px 0;line-height:30px;text-align:center;color:rgba(0, 0, 0, 0.4);}
.index_db i{cursor:pointer;text-decoration:underline;}

.index2-c{top:auto;bottom: 8px;display: none;}
.container{transform: rotate(180deg) scale(0.8);}
.index2-l h3,.index2-r{transform: rotate(180deg);}


@media screen and (max-width:1200px){    .kf{display:none;}
}