@keyframes InFromRight{from{transform: translateX(100%);}to{transform: translateX(0);}}
@keyframes InFromLeft{from{transform: translateX(-100%);}to{transform: translateX(0);}}
@keyframes memsBoxShrink{from{margin-right: 0px;}to{margin-right: 420px;}}
@keyframes memsBoxEnlarge{from{margin-right: 420px;}to{margin-right: 0px;}}
@keyframes bannerShrink{from{width: 100%;}to{width: calc(100% - 420px);}}
@keyframes bannerEnlarge{from{width: calc(100% - 420px);}to{width: 100%;}}
@keyframes memberBox{from{padding: 8px 8px 41px 8px;}41%{padding: 9px 9px 42px 9px;}to{padding: 8px 8px 41px 8px;}}
@keyframes lineEnlarge{from{right: 410px;}to{right: 41px;}}

@keyframes dancingLineUp{from{height: 3px; width: 3px;}	10%{width: 122px;}
	22%{width: 122px; left: 134px;} 30%{width: 63px; left: 196px;}
	38%{width: 3px; height: 3px; left: 256px;} 38.1%{width: 0px; height: 0;} to{width: 0px; height: 0;}}	
@keyframes dancingLineRight{21.9%{height: 0; width: 0;} 22%{height: 3px; width: 3px;} 30%{height: 79px;}
	38%{height: 122px; top: -33px;} 50%{height: 122px; top: -14px;} 58%{height: 63px; top: 48px;}
	66%{height: 3px; width: 3px; top: 108px;} 66.1%{width: 0px; height: 0;} to{height: 0; width: 0;}}	
@keyframes dancingLineDown{49.9%{height: 0; width: 0;} 50%{height: 3px; width: 3px; left: 256px;} 58%{width: 79px; left: 177px;} 
	66%{width: 122px; left: 134px;} 78%{width: 122px; left: -8px;} 86%{width: 63px; left: -8px;}
	92%{width: 3px; height: 3px; left: -8px;} 92.1%{width: 0; height: 0;}to{width: 0; height: 0;}}
@keyframes dancingLineLeft{77.9%{height: 0; width: 0;} 78%{height: 3px; width: 3px; top: 108px;} 86%{height: 79px; top: 31px;}
	92%{height: 122px; top: -14px;} 99.9%{height: 122px; width: 3px; top: -33px;}
	to{height: 0; width: 0;}}
	
@keyframes dancingLineLeft_UnFirst{from{height: 122px; width: 3px; top: -33px;} 8%{height: 63px; top: -33px;}
	16%{height: 3px; width: 3px; top: -33px;} 16.1%{height: 0; width: 0;} 75.9%{height: 0; width: 0; top: 108px;}
	76%{height: 3px; width: 3px; top: 108px;} 84%{height: 79px; top: 31px;}
	92%{height: 122px; top: -14px;} 99.9%{height: 122px; width: 3px; top: -33px;} to{height: 0; width: 0;}}
@keyframes dancingLineUp_UnFirst{from{height: 3px; width: 3px;} 8%{width: 79px;} 16%{width: 122px; left: -8px;}
	26%{width: 122px; left: 134px;} 34%{width: 63px; left: 196px;}
	42%{width: 3px; height: 3px; left: 256px;} 42.1%{width: 0px; height: 0;} to{width: 0px; height: 0;}}	
@keyframes dancingLineRight_UnFirst{25.9%{height: 0; width: 0;} 26%{height: 3px; width: 3px;} 34%{height: 79px;}
	42%{height: 122px; top: -33px;} 52%{height: 122px; top: -14px;} 60%{height: 63px; top: 48px;}
	66%{height: 3px; width: 3px; top: 108px;} 66.1%{width: 0px; height: 0;} to{height: 0; width: 0;}}	
@keyframes dancingLineDown_UnFirst{51.9%{height: 0; width: 0;} 52%{height: 3px; width: 3px; left: 256px;} 60%{width: 79px; left: 177px;} 
	66%{width: 122px; left: 134px;} 76%{width: 122px; left: -8px;} 84%{width: 63px; left: -8px;}
	92%{width: 3px; height: 3px; left: -8px;} 92.1%{width: 0; height: 0;}to{width: 0; height: 0;}}

#memsPage_JP .signCon{font-family: moe;}
#memsPage_JP .name{font-family: moe; font-size: 15px;}
#memsPage_CN #CN{background: #f5f5ff;}
#memsPage_JP #JP{background: #f5f5ff;}
#memsPage_US #US{background: #f5f5ff;}

.all{opacity: 0.85;}

.banner{height: 280px; width: 100%; background: #fef; position: relative;}
.carousel {position: relative; width: 92%; max-width: 500px; margin: 20px; overflow: hidden; display: inline-block; border-radius: 7px;}
.carousel-inner {position: relative; height: 240px;}
.carousel-inner::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 1;
	 background: rgba(141,122,141,0.41); pointer-events: none;}
.carousel-inner:hover .carouselText{display: block; animation: InFromRight 0.2s ease 1;}
.carousel-inner:hover .line{display: block; animation: lineEnlarge 0.2s ease forwards;}
.carousel-inner:hover::before{display: block;}
.carousel-item {position: absolute; width: 100%; height: 100%; opacity: 0;}
.carousel-item.active {opacity: 1; transform: translateX(0); transition: transform 0.6s ease; /* 仅保留滑入动画 */}
.carouselImg{width: 100%; height: 100%; object-fit: cover;}
.carouselHd,.carouselText,.line{position: absolute; font-family: wenKai; text-shadow: 0 0 20px #f9e9f9 ;}
.carouselHd{top: 18px; left: 22px; font-size: 28px;}
.carousel .line{top: 58px; left: 22px; right: 410px; height: 3px; background: #111; border-radius: 1.5px; display: none;}
.carouselText{top: 60px; left: 22px; font-size: 19px; display: none;}
.Office22{color: #f9e9f9;}
.Office22Line{background: #f9e9f9;}
.carousel-item.next {transform: translateX(100%);}
.carousel-item.prev {transform: translateX(-100%);}
.indicators {
	position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1;
}
.indicator {
	width: 8px; height: 8px; border-radius: 4px;  cursor: pointer; transition: all 0.3s ease;
	background-color: rgba(241,141,241,0.63);
}
.indicator.active {width: 50px; background-color: rgba(255,222,255,0.92);}
.control-btn {
    position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0); color: #f9e9f9; font-size: 22px;
    padding: 4px; cursor: pointer; z-index: 1;
}
.prev-btn {left: 8px;}
.next-btn {right: 8px;}
/*跳舞的线*/
.dancingLineUp,.dancingLineRight,.dancingLineDown,.dancingLineLeft,
.dancingLineUp_UnFirst,.dancingLineRight_UnFirst,.dancingLineDown_UnFirst,.dancingLineLeft_UnFirst{position: absolute; background: #b0b;}
.dancingLineUp,.dancingLineUp_UnFirst{ top: -33px; left: -8px; border-radius: 3px;}
.dancingLineRight,.dancingLineRight_UnFirst{ top: -33px; left: 256px; border-radius: 3px;}
.dancingLineDown,.dancingLineDown_UnFirst{ top: 108px; left: 256px; border-radius: 3px;}
.dancingLineLeft,.dancingLineLeft_UnFirst{ top: 108px; left: -8px; border-radius: 3px;}
/*钟核厅堂简介版块*/
#JoheHallImgEn,#JoheHallIntro{position: absolute; font-family: wenKai;}
.JoheHall{display: inline-block; position: relative; padding-left: 22px; vertical-align: 163px;}
.JoheHall:hover .dancingLineUp{animation: dancingLineUp 2.75s linear 1;}
.JoheHall:hover .dancingLineRight{animation: dancingLineRight 2.75s linear 1;}
.JoheHall:hover .dancingLineDown{animation: dancingLineDown 2.75s linear 1;}
.JoheHall:hover .dancingLineLeft{animation: dancingLineLeft 2.75s linear 1;}
.JoheHall:hover .dancingLineUp_UnFirst{animation: dancingLineUp_UnFirst 2.75s linear 2.75s infinite;}
.JoheHall:hover .dancingLineRight_UnFirst{animation: dancingLineRight_UnFirst 2.75s linear 2.75s infinite;}
.JoheHall:hover .dancingLineDown_UnFirst{animation: dancingLineDown_UnFirst 2.75s linear 2.75s infinite;}
.JoheHall:hover .dancingLineLeft_UnFirst{animation: dancingLineLeft_UnFirst 2.75s linear 2.75s infinite;}

#JoheHallImgEn{height: 22px; width: auto; display: inline-block; top: -25px; right: 2px;}
#JoheHallImg{padding-left: 63px ; height: 41px; width: auto; display: inline-block; }
#JoheHallIntro{top: 63px; right: -12px;line-height: 22px;}

/*当前位置版块*/
.locationBox{display: inline-block; position: absolute; right: 63px; top: 22px; height: 220px; padding: 12px; font-family: wenKai;
	background-image: linear-gradient(180deg, rgba(255, 249, 255, 0.92) 0%, rgba(255, 249, 255, 0.63) 63%, rgba(255, 249, 255, 0) 100%);
	border-radius:7px;}
#hd_location,#hd_contents{font-size: 19px; display: inline-block; vertical-align: 5px;}
#location,.locationBox ol{padding: 0 0 8px 32px; text-decoration: underline; line-height: 24px;}

/*图标盒子*/
.iconButton{margin-left: 18px; float: right;}
#iconBox{position: absolute; top: 122px; left: 0; height: 41px; width: 252px;}
#Location,#Contents{display: none;}
#Location .location{position: absolute; top: 51px; left: -56px;}


/*成员列表盒子*/
.membersBox{position: fixed; top: 280px; bottom: 0; left: 0; right: 0; 
	padding: 5px; border: 5px solid #fdf; background: #fff9ff;}
.memsBoxIn{position: fixed; top: 331px; bottom: 30px; left: 10px; right: 10px;
	padding: 41px 22px; border: 3px solid #99f; border-radius: 0 0 7px 7px; overflow: auto;}
.mems_hdBox{width: 92%; height: 41px; line-height: 41px; padding: 0 4%; font-family: wenKai; 
	background: #ccf; border-radius: 7px 7px 0 0;}
.headline_memsList{float: left;}
.headline_memsNum{float: right;}
#memsBoxShadowUp,#memsBoxShadowDown{position: fixed; height: 22px; left: 13px; right: 13px; z-index: 1; pointer-events: none;
	}
#memsBoxShadowUp{top: 334px;
	background-image: linear-gradient(180deg, rgba(255, 249, 255, 0.92) 0%, rgba(255, 249, 255, 0.63) 50%, rgba(255, 249, 255, 0) 100%);}
#memsBoxShadowDown{bottom: 33px;  border-radius: 5px;
	background-image: linear-gradient(0deg, rgba(255, 249, 255, 0.92) 0%, rgba(255, 249, 255, 0.63) 50%, rgba(255, 249, 255, 0) 100%);}

.memberBox{
	margin: 10px; padding: 8px 8px 41px 8px; display: inline-block; background: #ddf; position: relative;
	border-radius: 5px; transform: rotate(4.1deg); cursor: pointer;
	clip-path: polygon(-1% -50%, 150% -50%, 150% 150%, -50% 150%, -50% -50%, -1% -50%, -1% 15%, 15% -1%, -1% -1%, -1% -50%);
}
.memberBoxAnimate{
	animation: memberBox 0.8s ease 1;
}
.memBoxCon img{height: 92px; width: 92px; border: 5px solid #fef;}
.memNameBox{
	height: 49%; width: 100%; position: absolute; opacity: 0.9; bottom: 0; left: 0;
	clip-path: polygon(0 0, 100% 30%, 100% 100%, 0% 100%, 0 0); border-radius: 5px;
	background-image: linear-gradient(192deg, rgba(255, 185, 0, 0) 5%, rgba(255, 185, 0, 0.1) 20%, rgba(255, 185, 0, 0.9) 75%);
}
.hallNum{
	height: 41px; width: 41px; font-family: hallNum; font-size: 41px; color: #f22; overflow: hidden;
	padding: 0 0 8px 8px; position: absolute; opacity: 1; top: 12px; left: 2px;
	border: 3px double #f22; position: 0; border-radius: 50%; transform: rotate(22deg);
}
.name{font-family: "楷体"; position: absolute; bottom: 8px; right: 8px; }

/*右栏*/
.memProfile{
    position: fixed; top: 0; right: 0; width: 410px; height: 100%; padding: 5px; background-color: #f9f9f9;
    border-left: 1px solid #ccc; display: none;
    animation-name: InFromRight; animation-duration: 0.7s;
}
.profileCon{margin-bottom: 20px;}
.memPageBtnBox{width: 360px; height: 41px; margin: 0 25px; background: #aaf; border-radius: 20.5px; border: 1px solid #fdf;}
#memPageBtn{padding: 10px 5px; font-family: wenKai; text-align: center; color: white; display: block;}
.memPageBtnBox:hover {background-color: #99d;}

.headlineBox1{font-family: wenKai; width: 400px; height: 41px; border: 1px solid #dcd; border-bottom: none;
				background: #eef; text-align: center; font-size: 20px; line-height: 41px; border-radius: 7px 7px 0 0;}
.conBox{padding: 5px 5px 8px 5px; width: 390px; background: #fafaff; border: 1px solid #dcd; border-top: none; border-radius: 0 0 7px 7px;}
.headlineBox2{font-family: wenKai; width: 384px; height: 41px; padding-left: 4px; 
	background: #ddf; border: 1px solid #dcd; border-bottom: none; border-radius: 5px 5px 0 0;}
.headlineBox2 div{display: inline-block; height: 35px; width: 120px; margin: 6px 4px 0 0; text-align: center;
	line-height: 32px; background: #ddf;}
.headlineCon a{display: block; color: #111;}
/*右栏的内容样式*/
.conTable{width: 390px; padding: 5px; background: #f5f5ff; border-radius: 0 0 5px 5px; border: 1px solid #dcd; border-top: none;}
.memImgBorder{
	background: #fef; padding: 5px; border-radius: 5px; border: 1px solid #dcd;
	clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0% 100%, 0% 10%, 10% 0);
}
.conTable img{
	height: 141px; width: 141px; margin: 0 -14px;
	clip-path: polygon(14px 0, 127px 0, 127px 100%, 14px 100%, 14px 0);
}
.sup{font-family: wenKai; font-size: 14px; padding-left: 8px; margin-bottom: -8px;}
.memName{font-family: wenKai; font-size: 30px; padding-left: 8px;}
.conTable table{
	border: 1px solid #dcd; margin: 8px; padding: 8px; font-family: moe; line-height: 22px; 
	border-radius: 3px; background: #fafaff;
}
.conTable table td{border-bottom: 1px solid #dcd;}
.conTable table td:nth-child(1){width: 92px;}
.conTable table td:nth-child(2){width: 122px;}
.headlineSign{text-align: center; background: #aaf; transform: skew(-16deg); border-radius: 3px; margin: 0 100px;}
.headlineSignTset{transform: skew(16deg); font-family: wenKai; line-height: 26px;}
.signCon{width: 220px; height: 90px; line-height: 30px; border: 1px solid #dcd; padding: 0 22px; font-family: wenKai;
	background: #fafaff; position: relative; vertical-align: top; border-radius: 3px;}
.signLine{position: absolute; width: 90%; height: 33%; top: 34%; left: 5%; 
	border-top: 1px solid #dcd; border-bottom: 1px solid #dcd;}