@font-face {
  font-family: 'EmojiFont';
  src: local("Apple Color Emoji"),
       local("Segoe UI Emoji"),
       local("Noto Color Emoji"),
       url("NotoColorEmoji.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/npm/twemoji-colr-font@latest/twemoji.woff2") format("woff2")
  		unicode-range: U+1F300-1F5FF, U+1F600-1F64F, U+1F680-1F6FF;
}

body {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif,SF Pro SC,SF Pro Display,SF Pro Icons,PingFang SC,Microsoft YaHei,Helvetica Neue,'EmojiFont',Inter,!important;
   text-align: center;background: #f1f1f1;
   		 	font-size: 14px;
   		 	background-image: url('bg.png'); 
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
}
.screen {
        	bottom:1rem;
          display: none;
}
.actionPan {background: #FFF;
        position: fixed;
    top: 3.5rem;
    width: 1000px;
    bottom: 1rem;
    left: calc(50% - 500px);
    box-sizing: border-box;
    padding: 3rem 0 1rem;
    border-radius: 0.875rem;
    border: 2px solid #eee;
    /*box-shadow: #eee;
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);*/
}
.padDevice .bannerArea{height: 0;}    
.padDevice .picStory_MenuDivArea , .padDevice .wordingDBMenuDivArea , .padDevice #pageSet{    max-height: calc(100% - 3rem);}
.padDevice .bookMenuDivArea_limitHeight{    max-height: calc(100% - 5rem);}
.homewordMode #longTxtWord{position: fixed;
    width: 100% !important;
    left: 0;
    z-index: 5;
    bottom: 0;
    top: unset; 
    height: 210px;
    background: #FFF;
    padding-top: 1rem;}
.homewordMode .longTxtRowNav{width: 100% !important;
    left: 0;
    text-align: left;
    position: fixed;}
.homewordMode #longTxtWord .mobileNoDis {display: none !important;}
.homewordMode #longTxtWord .mobileDis {display: block !important;}
.homewordMode #longTxtArea {width: unset !important;}
.homewordMode .longTxtReadingDiv{padding-top: 0.5rem !important;height: calc(100% - 4rem) !important;}
.homewordMode #startAudioPlay{background: #2fa3e2;
    font-size: 1.05rem;
    padding: 0.5rem;
    font-weight: 600;
    color: #FFF;}
.homewordMode .longTxtSetupArea .blueTxtBtn , .homewordMode .longTxtSetupArea select{font-size: 1rem;}
.homewordMode .longTxtSetupArea {padding: 0.5rem 1rem 2rem;}    
.homework_setupBtn , .homework_allPlayBtn {background: #2fa3e2;
    border-radius: 4px;
    color: #FFF !important;
    padding: 2px 4px;}    
.homewordMode .subPageActionPan{height: calc(100% - 4rem);}    
.homewordMode .wordTableMode {display: grid  !important;}    
.homewordMode #wordListPrint {display: block !important;}    




#mainScreen {}
.area {
            margin: 20px auto;
            padding: 15px;
            border: 2px dashed #ddd;
            border-radius: 5px;
}
.word-btn {
            margin: 5px;
            padding: 0.2rem 0.5rem;
            background-color: rgb(255 246 217 / 70%);
    				border: 1px solid rgb(193 182 147);
            border-radius: 3px;
            cursor: pointer;
            font-weight: 600;
    				font-family: Calibri;
    		    font-style: italic;
		    color: #607d8b;
		    font-size: 1.5rem;
}
.hover-jump {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* 过渡效果 */
  cursor: pointer;
}

.hover-jump:hover {
  transform: translateY(-4px); /* 向上移动8px */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* 增加阴影增强立体感 */
}

#answerArea .word-btn{     
    margin: 0 5px;
    padding: 0 4px;
    color: #ff5722;
    border: 2px solid #f7c1bf;
    background: #f7ded6;
    border-radius: 6px;
    vertical-align: top;
    min-width: 3rem;
    height: 3.5rem;}
.no_border{    border: unset !important;}
.control-btn {
            margin: 0 5px;
            padding: 2px 20px;
            cursor: pointer;
}
.disabled {
            opacity: 0.5;
            cursor: not-allowed;
}
.correct { color: #607d8b; }
.incorrect {color: #ff5722; font-weight: 900;}
#shuffledWords, #answerArea {    border-radius: 0.5rem;
    text-align: center;
    min-height: 60px;
    padding: 1rem 0.5rem;
    /* margin: 0 10px; */
    border: 1px solid #eee;
    background: #f9f9f9;}

.slide-up {
  opacity: 0; /* 初始不可见 */
  transform: translateY(20px); /* 初始位置在下方20px */
  animation: slideUp 0.5s ease forwards; /* 应用动画 */
}

@keyframes slideUp {
  to {
    opacity: 1; /* 最终完全可见 */
    transform: translateY(0); /* 最终回到原始位置 */
  }
}

/* 触发类 - 添加此类别到元素上开始动画 */
.slide-up-animate {
  animation: slideUp 0.5s ease forwards;
}
        
.message {    margin: 2rem 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #607d8b;}
        
.uploadArea{
        	position: relative;
        	border: 2px dashed #eee; 
    border-radius: 8px; 
    overflow: hidden;
    padding: 1rem;display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;}
    
    
    #startScreen {background: unset;
    box-shadow: unset;
    border: unset;}
    .homeBox{background: #FFF;border: unset;
    /*box-shadow: 1px 2px 4px rgb(0 0 0 / 10%);*/
    }
    #startScreen .pageTitle{
    		font-size: 1.2rem;
		    line-height: 2.5rem;
		    left: calc(50% - 150px);
		    position: absolute;
		    top: 1rem;
		    padding: 0 2rem;
		    width: 300px;
		    border-radius: 20px;
    }
    .homeLogo {font-weight: 600;} 
    .pageTitle{    line-height: 1.2rem;
    color: #ffffff;
    position: fixed;
    top: 0;
    background: #1c94d6;
    padding: 0.5rem 1rem;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    font-weight: 600;
    font-size: 1.05rem;
    border-bottom-right-radius: 6px;
    min-width: 120px;}
    
    
    	.uploadBtn{
    		position: absolute;
		    bottom: 5px;
		    right: 1rem;
        background: #bfaf7c;
		    color: #FFF;
		    padding: 0.2rem 1rem;
		    border-radius: 4px;
		    /*width: 100%;*/
		    /*margin: 2rem 0 0.5rem;*/
		    line-height: 1.5rem;}
    
    .btnStyle{
    	/*background: -webkit-linear-gradient(right, #05a2c1, #03a8b9, #0994d1);*/
	    color: #2fa3e2;
	    border: 1px solid;
	    /*padding: 0px 0.5rem;*/
	    display: inline-block;
	    border-radius: 0.3rem;
	    cursor: pointer;
	    font-size: 0.875rem;
	   } 
    .btnStyle img{width:1rem;}
    
    
    .floatNavBtn{position: absolute; padding: 2px; top:50%;}
    .systemBtn{    background: #0075ff;
    line-height: 1rem;
    padding: 2px 0.2rem;
    border-radius: 4px;
    cursor: pointer;
    color: #FFF;
    display: inline-block;
    margin-right: 4px;}
    
    #filename{margin: 0.5rem 0;
    position: relative;}
    #filenameTxt{    margin: 0 0 0.5em;
    /* padding-bottom: 1em; */
    border: 1px solid #d8c7ae;
    font-size: 1rem;
    font-weight: 600;
    color: #04a6bc;
    width:100%;
    border-radius: 4px;
    min-height: 2.5rem;
    padding: 0.4rem;}
    .pageSubTitle{background: -webkit-linear-gradient(right, #05a2c1, #03a8b9, #0994d1);
    color: #FFF;
    font-weight: 600;
    padding: 0.2rem 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-top: 1rem;}
    

#pageSet_data{display: grid;
    margin: 1rem;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    gap: 1rem;}
#pageSet {cursor: pointer; max-height: calc(85% - 2rem); overflow: auto; }
/*#pageSet img {width: 20%; margin-right: 0.5rem; display: inline-block;}*/
.pageSet_div{
	/*padding: 6px 0.3rem ;*/
    box-shadow: 1px 2px 4px rgb(0 0 0 / 10%);
		vertical-align: top;
		position: relative;
		overflow: hidden;
    display: inline-block; 
    border-radius: 4px;
    line-height: 2rem;
    border: 4px solid #FFF;
    box-sizing: border-box; }
/*.pageSet_div:hover    {background: -webkit-linear-gradient(right, #e6ca70, #ecce6f, #efcd5f) !important;}*/
.pageSet_div:hover    {border: 4px solid;}
.pageSet_div_btn {border-bottom: 2px solid #FFF; line-height: 1rem; display: inline-block;}
.pageSet_div:hover .pageSet_div_btn {border-bottom: 2px solid;}
.app_desc_title{    color: #FFF;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.5rem 0;}    
    
.pageSet_div input{    position: absolute;   right: 1rem;  top: 40%;}
    
.app_desc{vertical-align: top; padding: 5px; line-height: 1.2rem;color: #923e38;}
.app_desc div:nth-child(1){
    /*border-left: 4px solid;*/
    line-height: 0.6rem;
    padding-left: 5px;
    color: #5f5f5f;
    margin: 5px 0;}
/*.app_desc div:nth-child(2){font-size: 0.7rem;}*/


.pageSeted{border: 4px solid;}
.pageSeted input{background-color: #FFF !important;}
#wordReading_txt{font-family: Calibri;
    font-size: 3rem;
    color: #ff5722;
    position: relative;
    display: inline-block;
    /*margin-bottom: 5rem;*/
    font-weight: 600;}
.smallPlayIcon{    width: 1.2rem;
    position: absolute;
    right: 0;
    cursor: pointer;
    top: 48%;}
    
#wordReading_chinese, #wordReading_shortChinese{position: relative; display: inline-block;}

#wordReading_chinese div{font-family: Calibri;  padding-right: 2rem;   font-size: 1rem; display: inline-block; position: relative;}
.wordReading_chinese_minTitle{position: absolute;
    left: -3rem;
    padding: 0 5px;
    font-size: 0.875rem;
    top: 4px;
    border-radius: 4px;background: #ff5722;
    color: #FFF;}
    
    
    
    
#wordReading_testMsg{padding: 0.5rem;color: #2fa3e2;font-size: 1.05rem; font-weight: 600;}

.wording_navList{position: relative; bottom: 0px;display: grid;
		gap:1px; text-align: center; left: 2.5%;
    width: 95%;}
#wordReading_nav, #setenceSpelling_nav {
		text-align: center;
		position: absolute; 
		display: grid;
		gap:1px;
    width: 95%;
    bottom: 4px;
    left: 2.5%;}
#wordReading_nav span, #setenceSpelling_nav span, .wording_navList span{
		background: #eee;
    height: 8px;
    /*border-radius: 50%;*/
    /*width: 12px;
    display: inline-block;
    margin-right: 4px;*/
   	cursor: pointer;
}
.wordReading_nav_sel, .setenceSpelling_nav_sel, .wording_navList_sel{
	background: #ff5722 !important;
}
.shortWord{color: #795548;
    font-size: 1.2rem;
    text-align: left;margin-left: 3rem;
    margin-top: 1rem;
    /*width: 70%;
    margin: 1rem 15% 0;
    margin-left: calc(15% + 3rem);*/
}
.shortWord p{font-weight: 600;    font-size: 1.2rem;}
#wordReading_emoji{font-size: 6rem; height: 45%;}
#wordReading_emoji_span{max-width: 50%;
    max-height: 90%;
    border-radius: 6px;
    overflow: hidden;}


@keyframes riseUp {
    from {
        transform: translateY(10px); /* 初始位置：下方 100px */
        opacity: 0; /* 初始透明度为 0（可选） */
    }
    to {
        transform: translateY(0); /* 最终位置：正常位置 */
        opacity: 1; /* 完全显示 */
    }
}

/* 应用动画 */
.rising-div {
    animation: riseUp 0.3s ease-out forwards;
}

#wordReading_emoji {max-height: 90%; overflow: hidden;}
#wordReading_emoji img{
		min-width: 120px;
    margin: 1rem auto;
    margin: auto;
    border-radius: 8px;}

.playIcon{    margin: 2rem auto; width: 40px;}

.code-item {width: 2.2rem;
    height: 4rem;
    margin: 0 1px 10px;
    /*border: 4px solid #fbffd1;*/
    /*border-radius: 5px 5px;*/
    color: #ff5722;
    text-align: center;
    line-height: 60px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top; 
    background: #c8dde8;
    font-family: Calibri;
    font-size: 2.5rem;
    border-bottom: 4px solid;
    font-weight: 600;}
.code-item-trainning .code-item {color: #eee;}
.code-item-trainning .code-item.active {color: #ff5722;}
/*.openAllSpelling div:first-child{margin-right: 1rem;}
.openAllSpelling div:nth-child(2),.openAllSpelling div:nth-child(3){margin-right: 1rem;}*/

.code-item-done {width: 2.2rem;
    height: 4rem;
    margin: 0 1px 10px;
    /*border: 2px solid #fbffd1;*/
    border-radius: 4px ; 
    text-align: center;
    line-height: 60px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top; 
    background: #c8dde8;
    font-family: Calibri;
    font-size: 2.5rem; 
    font-weight: 600;}
    
.code-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.code-area {
    position: relative;
    display:inline-block;
    vertical-align: top;
    height:60px;
}
.code-area-right{color: #ff5722; }
.code-area-right .code-item-done, .code-area-right .code-item{width:unset; margin: 0 0 10px !important; background: unset; border:unset;font-size: 3rem;}

.wordRight{border: 1px solid #ff5722;  background: unset !important;}
.active{border: 2px solid #ff5722}

.bottomBtn{position: absolute;
    width: 100%;
    bottom: 1.2rem;}

.subPageActionPan{
		position: absolute;
		background: #fdfdfd;
    width: 100%;
    font-size: 1rem;
    bottom: 0;
    top: 0;
}
#wordReading .subPageActionPan{}
.wordTest_area {position: absolute; width:100%; top:60%; cursor: pointer;  bottom: 1.5rem;}
#wordReading_shortChinese, #wordReading_phonetic{  color: #795548;  }
    
.bigWord{font-size: 1.5rem; min-width: 2rem;  height: 2rem; color: #ff5722;}
.bigWord div{ margin:0 2rem 0;}
#keyboardSpace{position: absolute;
    width: 80%;}
#keyboardSpace span{    background: #eee;
    padding: 4px 2px;
    margin: 0 1% 0.5rem;
    font-size: 1.2rem;
    line-height: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    color: #677c88;
    border-radius: 2px;
    width: 4.5%;
    display: inline-block;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 30%);}

.setence_question .word-btn{background: unset;padding: unset;}
.onTestWord{border-bottom: 3px solid;    min-width: 80px; color: #ff5722;}
#setence_question{margin: 1rem 0 2rem;}


/*game*/
  .word-link-game {
            width: 98%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            overflow: auto;
        }
        .word-link-game .iconMode{
        	font-size: clamp(1.5rem, 4vw, 4.5rem) !important;
        }
 
.game_right_result {
		/*display: flex;
    flex-wrap: wrap;
    gap: 4px;*/
		max-height: calc(100% - 15rem);
    overflow: auto;
    margin-top: 1rem;}
.game_right_result li p{display: inline-block; margin-left: 5px;}
.game_right_result li  {    
		/*flex: 1 0 calc(50% - 4px);*/
    /*max-width: 100%;*/
    color: #536dfe;
    font-weight: 600;
    border-radius: 6px;
    text-align: left;
    padding: 2px 4px;}      
        .book_template .block{padding: 0 !important;}
        
        .word_book_picStyle .word-link-game .iconMode img{  width: 100% !important; max-height: unset;}
        .word_book_picStyle #specialWin_content .flip-box-front img{  width: 100% !important; max-height: unset;}
        .word-link-game .iconMode img{max-height: 70%; 	min-height: 70%;}
        
        .word-link-game .block:hover{border:4px solid;}
        .word-link-game .block {
            position: absolute;
            width: 140px;
            height: 80px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 1.2rem;
            color: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            transition: all 0.3s;
            box-sizing: border-box;
            padding: 5px;
            text-align: center;
            box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            font-weight: bold;
            overflow: hidden;
        }
        
        .word-link-game .info-panel {
            text-align: center; 
            font-size: 0.875rem; 
            font-weight: 600;
            /*border-bottom: 1px solid #ddd;*/
            position: absolute;
		    bottom: 0;
		    width: 100%;
        }
        
        .word-link-game .canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1;
        }
        
        @keyframes word-link-shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(5px); }
            75% { transform: translateX(-5px); }
            100% { transform: translateX(0); }
        }
        
        .word-link-game .error {
            animation: word-link-shake 0.3s ease-in-out;
        }
        
        .word-link-game .selected {transform: scale(1.1);
    /* box-shadow: 0 0 10px gold; */
    border: 2px solid #FFF;
    z-index: 2;}
        
        .word-link-game button {
            padding: 0 16px; 
            cursor: pointer;
            /*color: white;*/
            /*border: none;*/
            border-radius: 5px;
            margin: 10px;
            transition: background 0.3s;
        }
        
        .word-link-game button:hover {
            background: #45a049;
        }
        
.container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        /* 这是游戏将要嵌入的容器 */
        #game-embed-container {
            width: 100%;
            resize: both; /* 允许调整大小，实际使用时可以删除 */
            overflow: auto;
            /*height: calc(100% - 2.5rem);*/ 
            height: 100%; 
            background: #fff;
				    border-radius: 6px;
        }
.game_deep_color #game-embed-container{ background: #2b2047;}   
.game_deep_color #wordGame_tools{ background: #2b2047;}       
.game_deep_color .game_right_btnArea { color: #2b2047;}
.game_deep_color .game_right_result li{ color: #fff;}
    
#wordGame{padding: 0; min-width: 840px; background: unset;}
#wordGame .subPageActionPan{background: unset;}
.backHome{    cursor: pointer;
    position: fixed; 
    right:1rem;
    /*font-weight: 600;*/ 
    top: 1rem;
    /*background: -webkit-linear-gradient(right, #05a2c1, #03a8b9, #0994d1);*/
    color: #FFF;
    z-index: 2;}
.backHome div{display: inline-block; margin: 0 5px;}
#finalMessage{position: fixed;
    z-index: 3;
    top: 40%;
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
        color: #ff5722;
    font-weight: 600;} 

.testBgImg{position: absolute; opacity: 0.5; bottom: 0;  z-index: 0; border-radius: 8px;}
.actionPan_content_area{    position: absolute;
    z-index: 1;
    width: 100%;
    top: 0;
    bottom: 0; overflow: auto;}
.sunicon{position: absolute;
    bottom: 2rem;
    right: 3rem;
    width: 10%;
    z-index: 3;
    transform: rotate( 60deg );
}
.sunicon1{top: 1rem;
position: absolute;
    transform: rotate( 60deg );
    width: 10%;
    z-index: 3;
    right: 1rem;}

input[type="checkbox"]:disabled {
	-webkit-appearance: none;  /* 清除浏览器默认样式 */
  appearance: none;
  /*border:1px solid #333;*/
  background-color: #FFF;  /* 背景色 */
  opacity: 0.8;              /* 可选：降低透明度 */
 width: 10px;
    height: 10px;
}

.word_up {
  font-size: 48px;
  font-weight: bold;
  animation: rise 1s ease-out forwards; /* 动画持续1秒，缓动效果 */
  opacity: 0; /* 初始透明 */
  transform: translateY(50px); /* 初始位置在下方 */
}

@keyframes rise {
  to {
    opacity: 1; /* 完全显示 */
    transform: translateY(0); /* 升到正常位置 */
  }
}

#singleProject{
	/*text-align: left;*/ 
    /*border: 2px dashed #eee;*/
    border-radius: 8px;
    padding: 1rem;
    overflow: hidden; 
    box-sizing: border-box;
    position: relative;display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;}
    
.singleProjectTitle {display: inline-block;margin-right: 1rem; font-weight: 600;}
.singleProjectItem {display: inline-block; margin-right: 1rem; color: #009ED2; cursor: pointer;}

#singleProjectNav {position: relative; } 
#singleProjectNav div{display: inline-block;box-sizing: border-box; cursor: pointer; margin:0 0.5rem;}
.singleProjectNavSel {
	/*background:#ffc107;color: #FFF;*/
	color: #ff934a;
    border-bottom: 2px solid;
}

.lineMiddle{
		display: inline-flex !important;
    align-items: center;
}
.absoluteCenter{display: flex;
    align-items: center;
    justify-content: center;}

#specialWin_content{   
    height: 100%;
    box-sizing: border-box;
    /*background: #fdfdfd;*/
    overflow: auto;
    padding-top: 1rem;
    /*border: 2px dashed #eee;
		margin: 0 calc(50% - 500px);
    border-radius: 8px;*/
    }

iframe{width:100%; height: 100%;}

.hidden{display: none !important;}
.longTxtReadingDiv{box-sizing: border-box; 
    text-align: left;
    line-height: 1.5rem;
    font-size: 1rem;
    overflow: auto;
    background: #FFF;
    padding: 0.5rem 1rem; }

.longTxtRow {    
	/*margin: 1.5rem 0;*/  
/*line-height: 1.8rem;*/
    padding:  1rem;
    border-radius: 6px;}
.blockInReading {background: #f0f2ff !important;}

.longTxtRow_en {
	margin-top: 0.5rem; line-height: 2rem; position: relative;}

.longTxtRow_en_title{
	background:#f7f7f7; border: 1px solid #efefef; font-weight: 600;  font-size: 1.5rem; margin: 0.5rem 0 1rem;}
.longTxtRow_en_title .specialWord p{font-size: unset;}	
.longTxtReadingDiv div{}
.longTxtRowNav{position: absolute;
    width: calc(75% - 30px);
    text-align: center;
    bottom: 0;
    padding: 1rem;
    background: #FFF;}
.longTxtRowNav .longTxtPageBtn {margin-left:5px;}
.parRowBtnStyle{    background: #fff !important;    color: #3f51b5 !important;}

.onReading {    color: #5867b9;
    font-weight: 600;
    padding: 0 5px;} 
.onReading p{ 
	border-bottom: 2px dashed #a0a9da;
 }
.spoken { 
	border-bottom: 2px dashed #a0a9da;
 }
.longTxtChineseRow{background: #f7f7f7;
    font-size: 0.875rem; margin-top: 0.5rem;
    position: relative;
    margin-bottom:2rem !important;}

.longTxtSetupArea select{background: unset;
    color: #2fa3e2;
    width: 48%;
    padding-left: 10px;}
.longTxtSetupArea    .systemBtn{margin:0;}
.longTxtSetupArea .blueTxtBtn{width: 48%;
    margin-bottom: unset;
    display: inline-block;}
    
.longTxtSetupArea .longTxtBigBtnArea    {    display: flex;  flex-wrap: wrap;}
.longTxtSetupArea .longTxtBigBtn {margin: 5px 0.5% 0;flex: 1 0 calc(50% - 4px);
    max-width: 100%;}
#startAudioPlay{}

.specialWin_content_span{display: inline-block;
    margin-right: 4px;
    position: relative;
    vertical-align: top;
    line-height: 1.5;
    padding: 0 2px;
    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,SF Pro SC,SF Pro Display,SF Pro Icons,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;} 
.specialWin_content_span b{font-size: 1.2rem;}
.specialWord{font-weight: 600; color: #ff934a; margin-bottom: 2px; } 
.specialWord div{margin-bottom: unset;}
.specialWord div:last-child{    
	text-align: center;  font-size: 0.8rem; line-height: 1.2rem; max-width: 8rem;
	display: -webkit-box;      /* 使用弹性盒子布局 */
  -webkit-line-clamp: 2;     /* 限制显示行数 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  overflow: hidden;          /* 隐藏超出部分 */
  text-overflow: ellipsis;   /* 超出时显示省略号 */
 }
.specialWord p{
		/*background: #ffefe5;*/ 
		color: #FFF; text-align: center;
		font-weight: 700;     font-size: 1.1rem;
    padding: 0 2px;}

#longTxtArea{width: 75%;
    height: 98%;
    line-height: 1.5em;
    overflow: auto;
    display: inline-block;
        margin-bottom: unset;
    vertical-align: top;font-size: 1rem;
    font-weight: 500;
    position: relative;
    padding: 0 1rem 4rem;}

#longTxtArea.highlight {
		border-color: #3f51b5;
    background-color: #f0fff0;
}    
#longTxtArea.highlight .uploadMessage{
		display: block;
}   
#longTxtArea .uploadMessage{
		display: none;
		position: absolute;
    z-index: 3;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: #FFF;
    font-size: 2rem;
    padding: 2rem;
    color: #9e9e9e;
}     

.setenceHiddenContext {display: none;position: absolute;
    top: 0;
    left: 0;
    font-size: 0.875rem;
    line-height: 1rem;
    padding: 2px 1rem;
    background: #5867b9;
    color: #FFF;
    border-bottom-right-radius: 6px;}
    
/*.longTxtRowHidden .sentenceBlock {display: none}*/
.longTxtRowHidden {background: #f7f7f7;padding: 0 1rem;display: none}

.longTxtRowOnReading {padding-top:1.5rem;}
.longTxtRowOnReading .setenceHiddenContext {display: block}

#longTxtWord{
    width: 25%;
    display: inline-block;
     height: 99%; 
    overflow: auto;
    margin-bottom: unset;
    padding:0 10px;
    vertical-align: top;
    bottom: 1rem;
    top: 1rem;}

.longTxt_toWordPageBtn{
    margin: 0.5rem 0 5px;
    color: #736e5e;
    padding: 0 5px;
    text-align: right;
    font-size: 0.875rem;
    cursor: pointer;
}
.longTxtWordArea{display: flex;
    flex-wrap: wrap;
    gap: 4px;}    
.longTxtWordItem{background: #ffd5b9;
    box-sizing: border-box;
    padding: 4px 8px;
    border-radius: 6px;
    color: #795548;
    font-size: 1rem;
    position: relative;
    flex: 1 0 calc(50% - 4px);
    max-width: 100%;
    text-overflow: ellipsis;
    line-height: 1rem;
    vertical-align: top;
    cursor: pointer;
    display: inline-block;}
    
.longTxtWordItem span {display: block; vertical-align: top;} 
.longTxtWordItem span:nth-child(1){font-weight: 600; font-size: 1rem;     margin-bottom: 5px;}
.longTxtWordItem span:nth-child(2){  white-space: nowrap;  font-size: 0.8rem; overflow: hidden;}

.longTxt_wordListPage .longTxtWordItem span:nth-child(3){ font-weight: 600; margin: 1rem 0;}
.longTxtWordItem span:nth-child(3){   font-size: 0.8rem; display: none;}
.longTxtWordItem span:nth-child(4){   font-size: 0.8rem; display: none;}
.longTxtWordItemOpen span{display: block !important;}
.longTxtWordItemOpen span:nth-child(3){white-space: nowrap;}
.longTxtWordItemOpen span:nth-child(4){white-space: nowrap;}

.longTxtWordItemBigMode span:nth-child(1){font-weight: 600; font-size: 1.2rem !important;  margin:0.5rem 0 !important;}
.longTxtWordItemBigMode span {display: block !important;
    font-size: 1rem !important;
    margin: 5px 0;}

.longTxtWordAudioIcon{width: 0.8rem;
    position: absolute;
    right: 6px;
    cursor: pointer;
    top: 6px;}
#longTxtSentence{    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: unset;
    width: 70%;
    border: 2px solid #ff934a; 
    color: #ff934a;
    position: absolute;
    bottom: 1rem;
    left:2%;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: #FFF;}
#longTxtSentence div{font-size: 1rem;}
#longTxtSentence .close-btn{position:absolute; right:5px; top:2px;}
#longTxtSentence .specialWord p{background: unset !important; color: unset;}
#longTxtSentence .specialWord div{display: none;}
.longTxtSentenceChinese{font-size: 1rem;}
.spin-image {
    animation: spin 5s linear infinite; /* 5秒一圈，匀速，无限循环 */
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#luckyDraw{margin:auto;padding-top: 0.5rem; position: relative;z-index: 2;    height: calc(100% - 5rem);
    padding: 5% 0; width:75%;}
.luckyDrawPageBtnArea .textBtn{margin:0 0.5rem;}

.luckyGame #luckyDraw{background: #ffb64b;
	border: 10px solid #fbec6c;
    border-radius: 8px;
    box-sizing: border-box;}
.luckyDrawItem {position: relative;
    display: inline-block;
    width: 30%;
    margin: 0.2rem 0.6% 0.3rem;
    color: #FFF;
    box-sizing: border-box;
    border-radius: 8px;
    height: 30%;
    font-size: 1.5rem;
    vertical-align: top;
    border: 4px solid hsla(0, 100%, 100%, 0.5);
    font-weight: 600;
    box-shadow: 0 4px 1px rgb(103 87 64);}
.luckyDrawItem span {    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;}
#luckyBtn{background: #ff5722;
    color: #ffeb3b;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
     cursor: pointer;
    margin: auto;}
.onLucky{background: #fff !important;
    color: #ff5722  !important;border: 2px solid;}


.luckyGame{background: #673ab7;}

#luckyDrawMsg{color: #e91e63;
    font-size: 2rem;
    position: absolute;
    top: 15%;
    width:60%;
    height: 70%;
        background: #fff59e;
    border: 4px solid #ffeb3b;
    box-sizing: border-box;
    left: 20%;
    border-radius: 12px;
    font-weight: 600;}
.luckyDrawResultMsg{
    width: 100%;
    height: calc(90% - 5rem);
    display: flex;
    align-items: center;
    justify-content: center;} 

.whoislucky_div {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 0px;
  grid-auto-rows: 1fr;
}
.whoislucky_item{display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #FFF;
    height: 100%;
    border:2px solid;
    box-sizing: border-box;}
    
.textBtn{font-size: 1rem;cursor: pointer;font-size: 1rem;
    cursor: pointer;
    border: 1px solid;
    padding: 0 0.5rem;
    margin: 0.5rem 20%;
    border-radius: 4px;
    color: #04a6bc;}
#luckyDrawMsg .textBtn{}

.bigBgIcon{position: absolute;
    width: 300px;
    height: 300px;
    background: #FFF;
    border-radius: 50%;
    bottom: 0;
    opacity: 0.1;
    z-index: 1;}
.bigBgIcon1{position: absolute;
bottom: 1rem;
    left: 2rem;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    z-index: 1;
    background: #ff5722;
    opacity: 0.2;}

.assets_category_item_area div{position: relative;
    margin: 0 0.15%;
    border-radius: 6px;
    padding: 2px 5px;
    box-sizing: border-box;
    background: #eee;
    cursor: pointer;
    text-align: left;
    margin-bottom: 5px;
    line-height: 1.5rem;
    display: inline-block;
        width: 33%;
    vertical-align: top;}
.assets_category_span{    position: relative;
    margin: 0.1rem;
    border-radius: 2px;
    padding: 2px 5px;
    box-sizing: border-box;
    background: #bfaf7c;
    color: #FFF;
    cursor: pointer;
    text-align: left;
    margin-right: 1rem;
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: top;
    width: 100px;
    
}
.localFileBlock span , .onlineFileBlock span{width: calc(100% - 50px);
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;}
#localDataArea .systemBtn   {margin-left: 0.5rem;
    float: right;
    vertical-align: top;
    width: unset;
    margin-top: 2px;} 
    
#localDataArea img{
		position: absolute;
		width: 0.8rem;
		top:0;
		right: 0;
    /*display: inline-block;
    margin-left: 1rem;
    margin-top: 4px;
    vertical-align: top;*/
    }
#localDataArea{    height: calc(85% - 5rem);
    padding-top: 10px;
    text-align: left;
		overflow: auto;
	  font-size: 0.875rem;
    }
.localDataAreaSel{background: #5978d9  !important;
    color: #FFF;
}
.blackBoardBg{
	/*background: #224948;
    border: 10px solid #cc9c57;*/
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    /*width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    border: 0;
    border-radius: unset;
    z-index: 3;*/
}

#wordingNav{
    /*position: absolute;
    left: 12rem;
   	right:8rem;
    top: 0.55rem;
    padding: 2px;
    border-radius: 8px;
    box-sizing: border-box;
    z-index: 3;*/
    /*width: 10rem;*/
   text-align: left; 
    display: inline-block;
    position: relative;
    }
#wordingNav_list{    position: absolute;
	  width: 550px;
    top: 1.6rem;
    left: 0;
    white-space: normal;
    background: #FFF;
    border: 1px solid #eee;
    padding: 5px;}
#wordingNav_list_content div{
	  padding: 0.5rem 1rem;
    line-height: 2rem;
    position: relative;
    /* margin: 2px 0; */
    text-align: left;
    box-sizing: border-box;
    border-radius: 4px;
    background: #f7f7f7;
    font-size: 0.875rem;
    cursor: pointer;
    color: #224948;
    /*border: 2px solid #ffecb2;*/
    width: 48%;
    margin: 2px 0.5%;
    display: inline-block;
    white-space: nowrap;}
    
#wordingNav .wordingNavSel{padding: 2px 0.5rem;border-radius: 4px;   cursor: pointer;}
#wordingNav div{}
#wordingNav_list div{}
#wordingNav_list_content div:hover{background: -webkit-linear-gradient(right, #a2deff, #9cdcff, #98daff) !important; color: #FFF;} 
#wordingNav_localdata_list div:hover{background:  -webkit-linear-gradient(right, #a2deff, #9cdcff, #98daff) !important; color: #FFF;} 

#wordingNav_list_menu{ 
    background: unset;
    border: unset;
    white-space: normal;
    margin: unset;
    padding: unset;} 
.wordingNav_list_menu_sel{background: #f0f0f0 !important; } 

#wordingNav_list_content, #wordingNav_localdata_list{   
    vertical-align: top;
    background: unset;
    border: unset;
    white-space: normal;
    padding: 5px; 
    max-height: 20rem;
    overflow: auto;
    margin: unset;}
#wordingNav_list_menu div{width:100%;border: unset;}
#wordingNav_localdata_list div{white-space: break-spaces;
    line-height: 1.5rem;
    width: 98%;
    vertical-align: top;
    border: unset;}

/*#wordingNav_list div:first-child{border:unset;}*/
.logonNav{    position: absolute;
    left: 14rem;
    top: 0.75rem;
    z-index: 2;
    font-size: 0.875rem;
    text-align: left;}    
    
.logonNavBtn{
    /*border: 2px solid #ffecb2;*/
    cursor: pointer;    padding: 2px 0.5rem;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    background: #f1f1f1;
}
.logonNavLongBtn{padding:2px 2rem 2px 0.5rem}

#logonNav{position: fixed; right: 1rem;} 
#logonNav div{display: inline-block;}
#changeToolsNav{padding: 2px 2rem 2px 0.5rem;}  

.dropDownList{position: absolute;
    width: auto;
    top: 1.6rem;
    left: 0;
    white-space: normal;background: #FFF;
    border: 1px solid #eee;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    padding: 1rem;}
    
.dropDownList div{    padding:1rem 1.5rem;
    line-height: 2rem;
    position: relative; 
    text-align: left;
    box-sizing: border-box; 
    background: #f7f7f7;
    font-size: 1rem;
    cursor: pointer;
    color: #224948;  
    display: inline-block;
    border-radius: 4px;
    white-space: nowrap;}
.dropDownList .app_icon{padding: 2px;
    line-height: 1rem;
    width: unset;
    color: #FFF;    font-size: 1rem;     border-radius: 6px;
    margin-right: 5px;}    
    
    
#changeToolsNav .dropDownList div:hover  {background:  -webkit-linear-gradient(right, #a2deff, #9cdcff, #98daff) !important; color: #FFF;}

.wordingNavSel{background: #f1f1f1  !important;
    white-space: nowrap;
    color: #6b6b6b;}

.wordingNavSel span:first-child{padding-right: 1rem;}
.wordingNavSel  .arrow-right::after{border-color: #6b6b6b;}


#wordingNav div span{top:50%;}
#wordingDB_content{position: absolute;
    z-index: 2;
    border-radius: 8px;
    box-sizing: border-box;
    width:90%;
    overflow: auto;}
    
#wordingDB_content .noIcon .card_pic{ display: none;}    
#wordingDB_content .noIcon .card_text{top: 50%; left: 50%; transform: translate(-50%, -50%); bottom: unset;}    
    
.WordingCardArea {bottom: unset !important; padding: 0 0.5rem;
    max-height: calc(100% - 6rem); left: 5%;}
.WordingCardArea .printPageBox{gap:2px;margin: auto auto 1rem;  }
    
.wordingDB_content_grid{    display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    min-height: 80%; max-height: calc(100% - 7rem);
    gap: 0px; grid-auto-rows: 1fr;}
    
.flash_card_leftArea{position: absolute;
    width: 50% !important;
    height: 100%;
    left: 0;
    z-index: 3;}

.flash_card_rightArea{position: absolute;
    width: 50% !important;
    height: 100%;
    right: 0;
    z-index: 3;}  
      
.wordCardStyle{position: relative;
    display: inline-block;
    /*width: 18%;*/
    margin: 0.2rem 0.6%;
    background: #FFF;
    box-sizing: border-box;
    border-radius: 8px;
    /*height: 22%;*/
    overflow: hidden;
    vertical-align: top;}
    
.wordCardStyle_word{    font-family: Calibri; 
    font-weight: 600;
    font-size: clamp(1rem, 2vw, 3rem);
    display: block;
    line-height: 2rem;
    width: 100%;}
.wordCardStyle_word_zh{font-family: Calibri;
    font-size: 1.2rem;
    font-weight: 600;}
    
.wordCard_hidden{display: none;}

.wordCardStyle div{ }
.wordCardStyle .card_text span{ display: inline-block; min-width: 80%; line-height: 1.2;}


        .flip-box {
            position: relative;
            transform-style: preserve-3d; /* 保持3D空间 */
            transition: transform 0.8s;
            cursor: pointer;
            min-height: 120px;
            text-align: center;
            border: 6px solid #FFF;
        }
        
        .flip-box-inner {
				    position: relative;
				    width: 100%;
				    height: 100%;
				    transition: transform 0.8s;
				    transform-style: preserve-3d;
				}

        
        .flip-box-front, .flip-box-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden; /* 隐藏背面 */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .flip-box-front {  font-size: 3rem; }
        .flip-box-front span{ max-width:50%;}
        .flip-box-front img{
            width:4rem;
        }
        
        .flip-box-back {
            background-color: #e74c3c;
            transform: rotateY(180deg); /* 初始状态背面朝后 */
        }
        
        .flip-box.flipped .flip-box-inner {
				    transform: rotateY(180deg);
				}
        

.emoji {
	    font-family: "EmojiFont", sans-serif;
  		font-weight: normal;
}

.homeBigBtn{width: 60%;
    line-height: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    position: absolute;
    left: 20%;
    bottom: 20%;
    border: 2px solid #f0fdff;}
.colorIcon{width: 60px !important;
    height: 60px !important;
    min-width: unset !important;
    border: 4px solid #333;
    display: inline-block;
    border-radius: 50%;}

/*.standardTools{color: #736e5e;}
.standardTools .app_desc_title{background: #736e5e;}
.readingTools{color: #736e5e;}
.readingTools .app_desc_title{background: #736e5e;}
.specialTools{color: #736e5e;} 
.specialTools .app_desc_title{background: #736e5e;}*/

.system_wording_db #wordingNav{display: none;}
.my_wordingDB_content{    width: 94% !important; left: 3%;}

.arrow-right {position: absolute;
    right: 8px;
  width: 60px;
  height: 2px; 
  top:5px;
}
.arrow-right::after {
  content: '';
  position: absolute;
  right: 0;
  top: -5px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(45deg);
}
.arrow-right-down{}
.arrow-right-down::after { 
  transform: rotate(135deg);
}

.black-arrow::after { 
  border-color:#333;
}
#wordListPrint{}
    
.word_list_div{    
		display: grid; 
		padding: 0 0.5rem;
    margin: 0 0.5rem;
    width: 96%;
    max-height: calc(100% - 4rem);
    overflow: auto;
    gap: 0px;}
.word_list_div_grid{grid-template-columns: repeat(2, minmax(100px, 1fr));} 
   
.printPageBox{display: grid;
  grid-template-columns: repeat(2, 1fr);  }    
.printPageBox_cardRow{grid-template-rows: repeat(5, 1fr);    }
.printPageBox_listRow{grid-template-rows: repeat(15, 1fr);    }
.wordList_editMode .printPageBox_listRow{grid-template-rows: unset;    }
  
.word_list_checkBox{ 
    right: 0;
    transform: translate(-50%, -50%);
    position: absolute;
    bottom: -5px;
    height: auto;}

.word_list_colorSet{right: 0.5rem;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    position: absolute;
    bottom: 5px;
    height: auto;
    width: 50%;
    cursor: pointer;
    height: 15px;}

.word_list_tableDiv_title{ }
.wordItemSpanInList{ line-height: 1; text-align: left;}
.wordTableImg {margin: 5px !important; width:4rem !important;}    


.word_list_div_singleCol .word_list_tableDiv{grid-template-columns: 5% 25% 25% 45% ;}
.word_list_div_singleCol .printPageBox{grid-template-columns: repeat(1, 1fr);}
.word_list_div_singleCol .tab_4{display: inline-flex !important;
    align-items: center;
    text-align: left;
    padding-left: 10px;}
.word_list_div_singleCol .word_list_tableDiv_title:nth-child(2) {display: none;}

.word_list_tableDiv {display: grid; grid-template-columns: 10% 45% 45%;border-color: inherit;font-size: 0.9rem;}    
.word_list_tableDiv div{  border-color: inherit;padding: 4px 0;}    
.word_list_tableDiv div:nth-child(2) {padding-left: 10px;}
.word_list_tableDiv .tab_3 {padding-left: 10px;  text-align: left;}   
.word_list_tableDiv .tab_4,.word_list_tableDiv .tab_5 {display: none;}  
.noBackColor{background:unset !important;}

.word_list_noImg .emoji{display:none;}
.word_list_noImg .sentenceReadingItem{padding-left:1rem;}
.word_list_noImg .word_list_tableDiv div:nth-child(2){justify-content: center}

.sentenceReadingItem {    position: relative;
    box-sizing: border-box;
    padding: 0.5rem 0 1rem 10px;
    margin: 5px 0.5rem 1.2rem;
    text-align: left;
    border-radius: 8px; 
    border: 2px solid ;
    border-color: inherit;} 
.sentenceReadingItem_active { border: 2px solid;}    
 

.word_list_color1{ border-color: #efebc9;color: #635732; }
.word_list_color1 .sentenceReadingItem, .word_list_color1 .word_list_tableDiv {background: #fffcdf;}   
    
.sentenceReadingItem div{ text-align: left;}

.word_list_tableDiv .sentenceIcon{font-size:2.5rem;}
.sentenceIcon{    font-size: clamp(0.2rem, 3vw, 4rem); overflow: hidden;
    width: 60px;
    /*line-height: 4rem;*/
    white-space: nowrap;
    display: inline-block;
    text-align: center !important;
    margin-right:5px;}
.sentenceIcon img{    width: 3rem;
    border-radius: 8px;
    vertical-align: middle;
    margin: auto;}
    
.word_list_div .word-card .sentenceIcon {max-width:7rem;}
.word-card .sentenceIcon{ height: auto;
    position: absolute;
    right: 0;
    width: unset;
    top: 5px;}
.word-card .sentenceLineDiv{width:98%;}
.word-card .sentenceLine{font-size: 1rem;}
.sentenceLineDiv{    display: inline-block;
     cursor: pointer;
    /*position: absolute;*/
    top: 5px;  
    right: 0;
    width: calc(100% - 70px);}
    
    
.sentenceLineDiv img{width: 16px;
    display: inline;
    cursor: pointer; 
    vertical-align: middle;
    margin-left: 10px;}
.sentenceWord{font-size: 1.4rem; font-weight: 600; }
.leftPoint{display: inline-block;
    background: #444;
    margin-right: 5px;
    width: 5px;
    height: 5px;}
.sentence_partOfSpeech {font-size:0.9rem}
.sentenceWord .sentenceLine_phonetic{margin-left: 5px;  vertical-align: middle;}
    
.sentenceLine{    font-family: Calibri;
    font-size: 1.1rem; position: relative; line-height: 1.2rem;
    font-weight: 500;  transition: all 0.2s;
  cursor: pointer;}

.sentenceLine span{margin:0 5px;}    
.sentenceLine img{position: absolute;  right: 0px; cursor: pointer; top: 0px;}
    
.sentenceLine_chinese{  font-size: 0.9rem;   padding-left:5px;  margin-bottom: unset !important; }
.sentencePlayIcon{width: 1.2rem;
    position: absolute;
    right: 1rem;
    cursor: pointer;
    top: 30%;}


.sentenceLine:active {
  transform: scale(0.95);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.sentenceBlock{cursor: pointer;}

.scrollBox::-webkit-scrollbar{ 
  width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/ 
  }
.scrollBox::-webkit-scrollbar:horizontal {
  height: 6px; /* 横向滚动条高度 */
}
.scrollBox::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ddd;
  }
.scrollBox::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }
  

.helpContentArea{    font-size: 0.875rem;
    /* color: #FFF; */
    text-align: left;
    box-sizing: border-box;
    padding: 1rem;
    background: #FFF;
    margin: 0 2rem;
    border-radius: 8px;
        height: 100%;
    overflow: auto;} 
    
    
.helpWindowTab{    display: inline-block;
    vertical-align: top;
    width: 10%;
    font-size: 0.9rem;
    /*background: #eee;*/
    margin: 0.1rem;
    padding: 5px;}
.tab2{width:30%}
.tab3{width:55%;max-height: 20rem;
    overflow: auto;}

.helpWindowSubTitle{font-weight: 600;
    font-size: 1rem;
    border-bottom: 2px solid;
    margin-right: 3rem;
    margin-bottom: 0.5rem;}

.logonContentArea{display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 8%; 
    top: 15%;
    width: 30%;
    background: #FFF;
    border-radius: 8px;
    padding: 1rem 1rem 2rem;}
    
    
.logonContentArea div{text-align: center;}
.logonInput{width: 100%;
    border: 1px solid #eee;
    background: #f9fbfa;
    padding: 0.5rem;
    box-sizing: border-box; 
    border-radius: 8px;}
.logonContentArea .btnStyle {width:100%;}

#messageTxt,#sysMessage{text-align: center; 
    width: 35%;
    /*margin: 0 35%;*/
    left: 0;
    line-height: 60px;
    height: unset;
    border-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90%;
    /*overflow: auto;*/
}
    
.floatDIV{position: absolute;
	  padding: 0 5px 5px;
    z-index: 6;
    font-size: 1rem;
    background: #FFF;
    width: 60%; 
    left: 20%;
    border-radius: 6px;
    top: 15%;}
.setup_message{width: 40% !important;max-height: 60%;}    
    
    
.floatDIV .blueTxtBtn{    line-height: 1rem;}    
.confirmBtn{border-top: 1px solid #eee;cursor: pointer; padding: 1rem; line-height: 1rem; font-size: 1.05rem; font-weight: 600; color: #333;}

.blueTxtBtn{  font-size: 0.875rem;  color: #2fa3e2; cursor: pointer;}
.questionItemColorStyle{box-shadow: 0 4px 1px rgb(90 90 90);color: #FFF; font-size: 1.5rem;}


.questionItemColorStyle:active {
 /*transition: all 0.2s;*/
  transform: scale(0.95); 
}
 
.setepMessage{position: absolute;
    top: 0;
    left: 0;
    background: #ff934a;
    padding: 4px 10px;
    border-bottom-right-radius: 8px;
    font-weight: 600;
    color: #FFF;}
.setepMessage span{background: #FFFF;
    color: #ff934a;
    margin: 0 4px;
    padding: 0 4px;
    border-radius: 8px;}

.app_icon{display: inline-block;
    font-size: 0.7rem;
    border: 2px solid;
    border-radius: 4px;
    line-height: 1rem;
    padding: 2px 4px;
    margin: 0 5px;    background: #8e8876;
    color: #FFF;}

.wordingCardDiv{
		/*box-shadow: 1px 4px 8px rgb(0 0 0 / 10%);
    background: #FFF;*/
    margin: 0 auto;
    /*max-width: 85%;*/
    border-radius: 16px;
    /*padding: 0 0 4rem;*/
    margin-top: 1rem;
    height: calc(100% - 4.5rem);
    position: relative;}

.readingWithList  #wordReading_txt {font-size: 3rem;}
.readingWithList  .colorIcon {width:40px; height:40px;}
.readingWithList .sentenceWord, .readingWithList .sentenceLine{    white-space: nowrap; font-weight: unset;  overflow: hidden;} 
.readingWithList .readingPage_word_list{position: absolute;
    width: calc(40% - 4rem);
    left: 2rem;
    text-align: left;
    padding: 0 0.5rem;
    bottom: 4rem;
    top: 2rem;
    overflow: auto;}
.readingPage_word_list_sel    {    border: 2px solid #b79c93;}
.readingWithList .wordingCardDiv{position: absolute;
    width: 60%;
    right: 2rem; }    
.readingWithList .sentenceReadingItem  {margin:0 0 5px;background: #fff7f2;}
.readingWithList .sentenceIcon{    font-size: clamp(0.2rem, 3vw, 2rem);
    line-height: unset;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;}
    
.mySpellingDiv {
	font-family: arial;
    color: #2fa3e2;
    display: inline-block;
    margin: 0 5px;
    font-size: 0.875rem;
    min-width: 60px;
}

.big_cardDiv{ cursor: pointer;  border-radius: 0;     padding-bottom: 0.5rem; }

.card_pic{width: 100%;
    height: 60%;
    font-size: 3.5rem;
    overflow: hidden;
    padding: 10% 5%;position: absolute;
    left: 0;
    z-index: 4;}
    
.word_list_tableDiv .card_pic_container{ max-width: 5rem;}    
.card_pic_container{white-space: nowrap;
    /*height: 100%;*/
    width: 100%;
    overflow: hidden;
    border-radius: 8px;}
     

.big_cardDiv .card_pic img{ border-radius: 8px;}  

.card_text{text-align: left;
		position: absolute;
    bottom: 0;
    padding: 0 0.5rem 1.5rem;
    text-align: center;
    width:100%;
    line-height: 1.5rem;}
    
.card_text span:first-child{    font-family: Calibri;
    font-weight: 600;
    display: block;
    width: 100%;
    text-align: center; 
    word-break: break-all;}
.card_text span:last-child{}

.flashCard_audioBtn{position: absolute;
    width: 1rem;
    cursor: pointer;
    right: 10px;
    top: 8px;}

.flash_card_bottom{position: absolute;
    bottom: 5px;
    z-index: 5;
    text-align: center;
    background: #FFF;
    width: 100%;
    border-radius: 8px;}
.txt_flash_card .big_cardDiv{min-height: 20%;}
.txt_flash_card .card_text span:first-child{font-size: 1.5rem;
    line-height: 2rem;}
.txt_flash_card  .wordCardStyle div{width: 95%;
    margin: 10% 0;}
.txt_flash_card  .card_text img{top: 40%;}

.homeNav{position: fixed;
    top: 0;
    width: 100%;
    background: #FFF;
    /* z-index: 4; */
    height: 3rem;
    border-bottom: 1px solid #eee; }

.homeNavItem div{display: inline-block; margin-right: 1rem; box-sizing: border-box;cursor: pointer;}
.homeNavItem {position: absolute;
    width: 50%;
    bottom: 0;
    left: 240px;
    text-align: left;}
.homeNavItemSel {border-bottom: 2px solid #1c94d6;}

.bannerArea{height: 6rem;
    background: #d7eefe;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;}
    
.bannerArea img:first-child{height: 100%;
    position: absolute;
    left: 15%;}

.bannerArea img:nth-child(2){position: absolute;
    height: 40%;
    bottom: 25%;
    left: 36%;
    border-radius: 8px;
    border: 2px solid #eee;}
    
.bannerArea img:nth-child(3){    position: absolute;
    height: 50%;
    top: 30%;
    border: 2px solid #eee;
    left: 42%;
    border-radius: 8px;}    
    
    
    
.bannerArea span{position: absolute;
    top: 20%;
    font-size: 1.2rem;
    font-weight: 600;
    color: #1c94d6;
    right: 15%;}
.bannerArea p{}

.bookBanner img{margin: unset;}
.bookBanner img:first-child{position: absolute;
    height: 100%;
    top: 10%;
    left: 15%;
    border-radius: 8px;}
    
.bookBanner img:nth-child(2){position: absolute;
    height: 75%;
    top: 30%;
    left: 32%;
    border-radius: 8px;}
    
.bookBanner img:nth-child(3){position: absolute;
    height: 65%;
    top: 39%;
    left: 28%;
    border-radius: 8px;
    border: 1px solid #eee;}
    
.bookBanner span{top:25%;right:20%;}
.total_spelling_score_itme{display: inline-block;
    margin: 0 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1rem;
    /* background: #fbffd1; */
    border-radius: 6px;
    padding: 2px;
    border: 2px solid #03a9f4;
    color: #03a9f4;}
.total_spelling_score_itme div:first-child{ 
    margin-right: 5px;
    vertical-align: top;
    background: #03a9f4;
    color: #FFF;
    padding: 4px;
    line-height: 1.5rem;
    border-radius: 4px;}
.total_spelling_score_itme div {display: inline-block;
    font-weight: bold;
    text-align: left;}
#total_spelling_score{    position: absolute;
    white-space: nowrap;
    overflow: auto;
    bottom: 1.2rem;
    /*width: 96%;*/
    padding: 0 5px;
    right:5px;}
#set_spelling_num{border-bottom: 1px solid;text-align: center;}

.class_drop_down_btn{padding-right: 1.5rem;}
#luckydraw_on_class{position: fixed; box-sizing: border-box; top: 35%; width:40%; left: 30%; background: #FFF; border-radius: 12px; padding: 1rem; z-index: 5;  cursor: pointer;}
#luckydraw_on_class div:first-child{min-height: 4rem;font-size: 2rem;}
#luckydraw_on_class .onLucky{background: #fff !important;
    color: #ff5722 !important; border: unset;
    font-weight: 600;
    font-size: 2rem;}
#luckydraw_on_class .blueTxtBtn{font-size: 1rem; margin-bottom: 0.5rem;}
.assets_category_item_area{display: inline-block;
    width: calc(100% - 120px);
    vertical-align: top;}

#file_review{    width: 80%; 
    max-height: 70%;
    padding: 1rem 1rem 3rem;
    box-sizing: border-box;}
#file_review_content{    height: calc(100% - 4rem);
    overflow: auto;}
#file_review_content table td{white-space: nowrap;}
#file_review_title{text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #333;
    margin-bottom: 0.5rem;
    line-height: 1.5rem;}

.goLocalFileEditBtn{position: absolute;
    font-size: 0.875rem;
    top: 5px;
    right: 1rem;
    color: #04a6bc;}    
.file_review_select{text-align: left; margin:1rem 5px;background: #eee;
    padding: 10px;}    
#file_review_content table{ text-align: left;   font-size: 0.875rem; line-height: 1rem;     margin: 1rem 0;}
#file_review_content table tr{padding: 2px;}
#file_review .blueTxtBtn{margin: 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #FFF;
    line-height: 2.5rem;}

#specialWin_tools{    position: absolute;
    bottom: 0;
    right: 0;
    background: #fdfdfd;
    width: 100%;
    z-index: 1;
    padding: 10px;}
#specialWin_tools select,  #setenceSpellingMode{    
		border: 1px solid #2fa3e2;
    color: #2fa3e2;
		padding:2px 20px;
		margin: 0 0.5rem;
    cursor: pointer;
    background: #FFF;
    font-size: 0.875rem; 
    border-radius: 4px;}

.border_top_2{border-top: 2px solid;}

.logon_win_title{padding: 0.5rem;
    font-weight: 600;
    font-size: 1.5rem;
    color: #1c94d6;}

.logonFloatImgDiv{position: absolute;
		left: 0;
    width: 100%;
    height:100%;
    background: #d7eefe;
    top: 0%;}

.logonFloatImg{position: absolute;
		left: 0;
    width: 60%;
    top: 20%;}
    

.isVip{position: absolute;
    font-size: 0.675rem;
    top: 0.5rem;
    right: 5px;
    background: #ffc107;
    color: #FFF;
    line-height: 1rem;
    padding: 0 2px;
    border-radius: 4px;}
.error{font-size: 0.875rem; min-height: 0.5rem; text-align: left;
    color: #9e9e9e;}
.reg_mode{top:10%;}
.reg_mode .logonInput{margin-bottom: unset;}
.logonContentArea select{margin-bottom: 2rem;
    border: 1px solid #eee;
    height: 2rem;
    width: 100%;
    border-radius: 8px;
    padding: 5px;
    color: #9e9e9e;
    background: #f9fbfa;}
#my_reg_data{
    white-space: nowrap;
    right: 0;
    background: white;
    padding: 5px;
    border-radius: 6px;}
#tools_mode{  padding: 5px; }
/*.logonNav_members_live:hover #my_reg_data{display: block;}*/

#page_bottom{    position: fixed; z-index: 5;
    bottom: 0;
    text-align: center;
    width: 100%;}

.longTxtSetupArea{font-size: 0.875rem;
    background: #f1faff;
    color: #736e5e;
    padding: 4px 8px;
    border-radius: 8px;}

.spellingOpen{color:#795548 !important;    margin-bottom: 1rem;}
.spellingOpen .chatHightlight{ margin:0 2px; color: #ff5722;}
.spellingOpen span{border-bottom: 4px solid;}

 
.openAllSpelling input{margin-right: 5px;}
.openAllSpelling div{ display: inline-block; margin-right: 0.4rem;} 
.openAllSpelling{position: absolute;
    width: 100%;
    bottom: 0;}
.wordReading_word_div span{cursor: pointer;}  

.awardMessage div:first-child{background: #ff9800;
    position: absolute;
    width: 50%;
    left: 25%;
    top: -1.2rem;
    line-height: 2rem;
    border-radius: 8px;
    font-size: 1.5rem;
        padding: 4px;
    color: #FFF;}
.awardMessage{padding: 2rem 1rem ;
    line-height: 1.5rem;
    font-size: 1.5rem;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: #ff9800;}

.luckyResultList{    position: absolute;
    right: 0px;
    bottom: 3rem;
    width: 7rem;
    max-height: 80%;
    overflow: auto;}
.luckyResultList .total_spelling_score_itme{text-align: left; padding: 2px;margin-bottom: 0.5rem;}
.luckyResultList  .total_spelling_score_itme div:first-child{margin-right:0;}

.lucky_draw_setWin{    width: 40%; left: 30%;  top: 20%;}
#this_lucky_listArr  {width: 95%; margin: 10px;    background: #eee; padding: 1rem 4px;min-height: 8rem; font-size: 1rem;}
.lucky_draw_setWin div:first-child {padding: 1rem; font-weight: bold;
    font-size: 1rem;
    border-bottom: 1px solid #eee;}
#setup_win .blueTxtBtn {display: inline-block; margin: 0 1rem;}
.luckySetupConfirmBtn{margin: 10px 0; width: 96%;}

#lucky_mode_select{    border: 1px solid #04a6bc;    color: #04a6bc;
    padding: 3px; 
    margin:0 0.5rem;
    cursor: pointer;
    border-radius: 4px;}

.wordingDBMenuDivArea{      max-height: calc(85% - 6rem);
    overflow: auto;  display: grid;margin: 0 2rem ;
    grid-template-columns: repeat(6, minmax(100px, 1fr));
    gap: 0px;}
.wordingDBMenuDivArea  .bookMenuDiv { 
		background: #FFF;
		text-align: center;
    margin: 0.2rem 0.5rem 1rem;
    box-shadow: 1px 2px 4px rgb(0 0 0 / 10%); 
    border: 2px solid #FFF;
    cursor: pointer;
    } 
.wordingDBMenuDivArea  .bookMenuDiv:hover, .wordingDBMenuDivAreaSel {color:  #ff9800; border:2px solid ;} 
.emojiIcon{padding:0.5rem 1rem; font-size: 2rem;}

.bookMenuDivArea{    
	display: grid;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
    gap: 0px;
		margin: 0 2rem;
  }
.bookMenuDivArea_limitHeight{
	  max-height: calc(85% - 4rem);
    box-sizing: border-box;
    overflow: auto;}
.bookMenuDiv{background: #f7f7f7;
    padding: 0.5rem;
    border-radius: 8px;
    text-align: left;
    border: 2px solid #FFF;
		cursor: pointer;
    margin: 0.2rem 0.5rem ;}
.bookMenuDiv:hover{
	border: 2px solid #1c94d6;
}    
.bookMenuDiv:hover .goSpellingPageBtn{border-bottom: 2px solid #1c94d6;}
.bookMenuDiv:hover .bookMenuDiv_pic     {text-decoration: underline;}   
.bookMenuDiv_pic div{display: inline-block;}    
.bookMenuDiv_title{color: #1c94d6;
    font-weight: bold;
    border-left: 4px solid;
    padding-left: 0.5rem;
    line-height: 1rem;
    margin: 0.5rem 0;}
.bookMenuDiv span{
		margin-right: 4px;
    color: #1c94d6;
    padding: 0 2px;
    border: 1px solid;
    font-size: 0.75rem;
    border-radius: 2px;
    cursor: pointer;
}  
.bookMenuDiv_pic{background: #FFF;
    border-radius: 8px;
    margin: 5px;
    height: 3rem;
    font-size: 1rem;
    color: #1c94d6;
    font-weight: 600;}

.bookMenuDiv_tools{text-align: center; margin:0.5rem 5% ;grid-template-columns: repeat(4, minmax(25%, 1fr));
    display: grid;
    gap: 3px;}    
    
#myVideo{
	position: relative;
	background: #000;   
	border: 12px solid #ffe592; 
	height: 100%; 
  clip-path: polygon(
    0 5px,
    100% 5px,
    100% 100%,
    5px 100%,
    0 100%,
    0 10px
  );
  z-index: 1;
}    
.wordBookTemplate #wordReading_txt{font-size: 3rem;}


.wordBookTemplate #wordReading_emoji{margin: 0 10%;
    width: 80%;}
.wordBookTemplate #wordReading_emoji::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* 16:9的比例计算为 9/16*100% = 56.25% */
}

.readingWithList .wordReadingTxtContainer{width:100%;}
.wordReadingTxtContainer{ 
		width:70%;
		margin:auto;}
.bigVideo #wordReading_emoji{height:65%; box-shadow: 10px 12px 0px #88847a;}

.wordBookTemplate #wordReading_emoji span{max-height:100%;}

.wordBookTemplate #wordReading_emoji img{
	width:90%; 
	border-radius: 6px;
	/*width:unset !important;*/
	max-width: 270px;
}


.wordPicNavSelected {
    font-weight: bold;
    color: #333;
}
#wordPicNav{    width: 100%;
    padding: 5px;
    color: #04a6bc;
    cursor: pointer;
    margin-top: 1rem;
    font-size: 1rem;}
#wordPicNav span{margin:0 0.5rem;}

.book_template .flip-box-front img{width: 100%;    min-width: 3vw;}
.bookLive .flip-box-front img{}
/*.book_template .card_pic img{min-width:3rem;}*/
.bookLive .wordCardStyle { 
	   /*width: 24%;*/ 
	   margin: 0.5%;}
.bookLive #wordingDB_content{width:90%; }
.bookWin_content{height: 100%;background-repeat: no-repeat; background-size: cover;}

.bookMenuDivSel{color: #ff5722;}
.book2000 {width:49%; margin-right: 1%;}

.elegant-dashed {
  background: 
    linear-gradient(90deg, rgba(200,200,200,0.3) 1px, transparent 1px),
    linear-gradient(rgba(200,200,200,0.3) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #f9f9f9;
}

.bookLive .autoReading #wordPicNav{display: none;}
.autoReading #wordReading_chinese{display: none;}
.autoReading #wordReading_txt{     font-size: 4rem;}

.navPicArea{width: 100%;
    background: #FFF;
    height: 4rem;
    border-radius: 8px;
    overflow: hidden;}
.navPicArea img{    height: 60%;
    max-width: unset;}

.no_alter p{background: unset !important;
    color: #333;}
.no_alter div{display: none !important;}
.no_alter p{color:unset !important;}

.myClassFile{line-height: 1.2rem;
    text-align: left;
    padding: 0 5px;}

.searchDiv{position: absolute;
    right: 5px;
    /* background: #eee; */
    border-radius: 16px;
    top: -2px;
    padding: 2px;
    border: 1px solid #eee;}
.searchDiv input{ padding: 0 5px;  cursor: pointer;  background: unset;}
.searchDiv .blueTxtBtn{  line-height: 1.5rem;  position: absolute; right: 10px;}

.special_class_homepage{position: absolute;
    bottom: 2rem;
    width: 70%;
    background: #fbd7a2;
    border-radius: 8px;
    left: 15%;
    display: grid;
    padding: 0.5rem;
    grid-template-columns: repeat(4, minmax(80px, 1fr));
    gap: 0px;
    box-sizing: border-box;
    border: 6px solid #f1bd70;} 
.special_class_homepage_6{grid-template-columns: repeat(6, minmax(80px, 1fr));}    
.special_class_homepage .bookMenuDiv{padding:0.5rem; text-align: center; cursor: pointer;}
.special_class_homepage .bookMenuDiv .app_desc_title {white-space: nowrap;  overflow: hidden;}
.special_class_homepage_title{position: absolute;
    z-index: 2;
    bottom: 30%;
    width: 80%;
    left: 10%;
    font-size: 3.5rem;
    color: #FFF;
    font-weight: 900;}
.special_class_homepage_bg{height:100%; width:unset;}
.special_class_game_title{    
		position: absolute;
    top: 0;
    width: 40%;
    left: 30%;
    /*background: #edf9ff;*/
    box-sizing: border-box;
    color: #82a0af;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0 0.5rem 5px;
    text-align: center;
    border: 2px solid #dee8ec;
    border-top: unset;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;}

.localFileSelInWin div , .localFileSelInWin select{    color: #2fa3e2;
    line-height: 1.5rem;
    border: 1px solid;
    margin: 0 0.5%;
    border-radius: 4px;
    text-align: left;
    margin-bottom: 5px;
    display: inline-block;
    background: #FFF;
    width: 99%;
    cursor: pointer;
    padding: 5px;}
.sysMessage_content{line-height: 1rem; padding: 1rem 0 1rem;     vertical-align: middle;}
.localFileSelInWin span:last-child{float:right;}
.setup_message_title{font-size: 1.2rem;  color: #2fa3e2;
    font-weight: 600;  line-height: 2rem;   border-bottom: 1px solid #eee; margin-bottom: 1rem;}
.localFileSelInWin span:first-child{display: inline-block;
    width: calc(100% - 1.8rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;}
.localFileSelInWin{display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-height: 14rem;
    overflow: auto;
    margin: 2rem;}
#wordGame_tools{font-size: 0.875rem;
    /*position: absolute;*/
    display: inline-block;
    background: #fff;
    vertical-align: top;
    bottom: 0;
    width:180px;
    height: calc(100% - 1rem);
    margin: 0.5rem 0;
    border-radius: 6px;
    padding: 0.5rem;
    position: relative;}
#game-embed-container-area{position: relative;display: inline-block;padding:0.5rem ; padding-left: 0; }
.game_right_btnArea{position: absolute; color: #04a6bc;
    width: calc(100% - 1rem);
    bottom: 1rem;}
    
.game_right_btnArea select {border: 1px solid; margin-bottom: 5px;}
.game_right_btnArea select,.game_right_btnArea button{width:100%; background: #FFF;    border-radius: 4px;
    padding:  5px;}
.game_right_parSpan{display: block;
    background: #536dfe;
    color: #FFF;
    border-radius: 6px;
    margin-bottom: 5px;
    padding: 5px;}
.bookWin_nav {margin: 1rem 2rem 0;  }
.bookWin_nav div{    display: inline-block;
    font-weight: 600;
    color: #adadad;
    margin: 0 5px;
    background: #f1f1f1;
    padding: 0 8px;
    border-radius: 4px;} 
.bookWin_navSel {color: rgb(96 165 250) !important;
    border-bottom: 2px solid;
    background: unset !important;
    padding: 0 !important;
    border-radius: unset !important;}

.account_message{line-height: 1.2rem;}

.account_message_title{font-size: 1.2rem;
    line-height: 3rem;
    border-bottom: 2px solid #d0e2ec;
    margin: 0 0.5rem 1rem;
    background: #f3fafd;
    font-weight: 600;
    color: #5488a5;}
.account_message_content{    display: grid; margin-bottom: 1rem;
     grid-template-columns: 3fr 7fr; font-size: 0.875rem;
    gap: 4px 2px;;}
.account_message_content input{
	width: 65%;
    font-size: 0.875rem;
    padding: 2px;
    border-radius: 4px;
    text-align: center;
}
.account_message_myBooks{    grid-template-columns: repeat(2, minmax(20px, 1fr));
    display: grid;
    padding: 5px;
    gap: 5px;}
.account_message_myBooks div{border-radius: 6px; margin: 0 0.5rem;}

.noChinese div {display: none !important;}
/*.noChinese {text-align: center;}
.noChinese div {display: none;}
.noChinese img{position: relative; right:unset;}*/

.spellingMenuDivArea {margin: 1rem 2rem 0; text-align: left;    height: calc(100% - 130px); padding: 0 5px;
    overflow: auto;}
.spellingMaster_div_item div{}
.spellingMaster_div_category{}
.spellingMaster_div_subitem{}
.spellingMaster_div_grid{
	/*grid-template-columns: repeat(6, minmax(8%, 1fr));*/  
	display: grid;
	}
.spellingMaster_div_data{
	/*grid-template-columns: repeat(2, minmax(100px, 1fr));*/    
	margin-bottom: 1rem;
    display: grid;    border: 1px solid #eee;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 0.5rem 0.5rem 1rem;}
.spellingMaster_div_item {margin-bottom: 0.5rem;}
.spellingMaster_div_title{color: #677c88;
		position: relative;
		cursor: pointer;
    font-weight: 600;
    background: #eee;
    padding: 5px 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;}
.spellingMaster_div_title .systemBtn{margin-left:1rem;}
.spellingMaster_div_grid span{cursor: pointer;}

.spellingMessageOnHelp {font-size: 1rem; }
.spellingMessageOnHelp div:nth-child(2){    white-space: normal; 
    /*grid-template-columns: repeat(5, minmax(8%, 1fr));
    display: grid;*/
    padding: 0 1rem 1rem;
    width: 100%;
    text-align: center;
    font-weight: 550;}
.spellingMessageOnHelp span{display: inline-block; display: inline-block;  margin: 0 5px;}
.spellingMessageWin{width: 50% !important; }

.spellingMaster_general_grid{    
	/*grid-template-columns: repeat(8, minmax(8%, 1fr));*/
    display: grid; padding: 0.5rem 0.5rem 1rem;border: 1px solid #eee; 
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;}
    
#spellingBookMenuList .blueTxtBtn {font-weight: bold; text-decoration: underline;}
#spellingBookMenuList span:hover{color: #04a6bc; cursor: pointer;}


.spellingWithIcon{    padding-top: 1rem !important;}
.spellingWithIcon #wordReading_emoji {    height: 40% !important;
    /* margin-top: 1rem; */
    font-size: 6rem !important;
    width: 20rem;
    margin-left: calc(50% - 10rem);
    white-space: nowrap;
    overflow: hidden;
    border-radius: 6px;}
.spellingWithIcon .wordReadingTxtContainer  {height:unset;}
.spellingWithIcon #wordReading_shortChinese{    margin-top: unset !important;}
.spellingWithIcon .wordTest_area{top:52%;}
.spellingMaster_div_title .isVip{right:1.2rem;}

.myHighScore{ background: #ffeee9;
    margin-bottom: 4px;
    padding: 2px 4px;
    color: #FFF;}
.myLowScore{    background: #fff7db;
    margin-bottom: 4px;
    padding: 2px 4px;
    }

.spellingLive #bookWin{width:320px;} 
.spellingLive .code-item-done , .spellingLive .code-item{min-width: 2rem;  padding: 0 4px;}
.spellingLive #specialWin{display: none !important;}
.spellingLive #wordReading .pageTitle, .spellingLive .bannerArea {display: none;}
.spellingLive .spellingMenuDivArea{margin: 0 0.5rem; height: calc(100% - 10rem);}
.spellingLive .spellingMaster_general_grid, .spellingLive .spellingMaster_div_data, .spellingLive .spellingMaster_div_grid{display: block;}

.spellingLive .spellingMaster_general_grid span, .spellingLive .spellingMaster_div_grid span{display: block;}
.spellingLive .wordReading_seltestpan_data {width:60%;}
.spellingLive #total_spelling_score{    bottom: unset;
    top: 5px;
    right: 0;
    padding: 0;}
.spellingLive .unitItemDiv:hover {color: #1c94d6;}
.spellingLive .unitItemDiv span {display: inline-block;}
.spellingLive .unitItemDiv input[type="checkbox"] {display: inline-block; margin-right: 0.5rem;vertical-align: top; margin-top: 4px; width:auto; }
.unitItemDiv span {display: none;}
.unitItemDiv span:last-child{background: #f1f1f1;
    font-size: 0.7rem;
    border-radius: 4px;
    line-height: 1rem;
    padding: 0 2px;
    margin-left: 0.5rem;}
.unitItemDiv input[type="checkbox"] {border-radius: 2px; border:1px solid #333;display: none;}
.unitName{    display: inline-block !important;
    max-width: 60%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;}
.unitItemDiv {position: relative;  padding: 4px;  margin-bottom: 0.5rem; color: #677c88; cursor: pointer;}
.unitItemDivSel{color: #0075ff;}
.unitScore {    position: absolute;
    right: 1rem;
    top: 20%;
    font-size: 0.7rem;
    font-weight: bold;
}
#currentSpellingUnit{margin: 0.5rem;
		color: #677c88;
    text-align: left;
    background: #eee;
    padding: 0.5rem 10px;
    border-radius: 4px;}

#spellingContentNav{margin: 1rem 0.5rem 0.5rem;
    color: #677c88;
    text-align: left;
    background: #eee;
    /* padding: 0.5rem 10px; */
    border-radius: 4px;
    border: 1px solid #eee;
    cursor: pointer;}
#spellingContentNav div{display: inline-block; width:50%; padding: 0.5rem 10px;
    text-align: center;}
.spellingContentNavSel{background: #FFF; font-weight: bold;}

.wordTableMode{
    width: 50% !important;
    left: 25% !important;
    grid-template-columns: repeat(4, minmax(8%, 1fr)) !important;
}
.spellingModeSet{    position: absolute;
    text-align: center;
    top: 0;
    width: 50%;
    left: 25%;
     background: #eee; 
    color: #000;
    font-size: 0.875rem;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #d1dbe0;
    border-top: unset;
    grid-template-columns: repeat(4, minmax(8%, 1fr));
    display: grid;
    cursor: pointer;}
.spellingModeSet div{display: inline-block; padding:0 4px;}
.spellingModeSet div:nth-child(2){border-left: 1px solid #fffcfc; border-right: 1px solid #fffcfc;}


.spellingModeSetSel {background: #1c94d6;
    color: #FFF;}
#wordReading_testpan{color: #677c88;
    font-family: 'Arial Narrow', 'Helvetica Condensed', 'Roboto Condensed', sans-serif;
    padding: 0 2rem;}

.gameBookMenuDivArea{    grid-template-columns: repeat(5, minmax(8%, 1fr));
    display: grid;
    gap: 10px;     margin: 0 2rem;
    padding: 1rem;
}

.gameList_div{
	/*padding: 6px 0.3rem ;*/
    box-shadow: 1px 2px 4px rgb(0 0 0 / 10%);
		vertical-align: top;
		position: relative;
		overflow: hidden;
    display: inline-block; 
    border-radius: 12px;
    line-height: 2rem;
    cursor: pointer;
    border: 4px solid #FFF;
    text-align: center;
    box-sizing: border-box; }
/*.pageSet_div:hover    {background: -webkit-linear-gradient(right, #e6ca70, #ecce6f, #efcd5f) !important;}*/
.gameList_div:hover    {border: 4px solid;}
.pageSet_div_btn {border-bottom: 2px solid #FFF; line-height: 1rem; display: inline-block;}
.gameList_div:hover .pageSet_div_btn {border-bottom: 2px solid;}

.book_total_wordsNum{    background: #f1f1f1;
    font-size: 0.7rem;
    border-radius: 4px;
    line-height: 1rem;
    padding: 0 2px;
    margin-left: 0.5rem;}

.top_line{    border-top: 1px solid #eee;}
.window_btn{cursor: pointer;  padding-top: 1rem; border-top:1px solid #eee; line-height: 1rem; display: block;} 
.btnInWin{cursor: pointer; padding: 1rem; border-top:1px solid #eee;}

.word-answer-block{ color: #795548;
    font-size: 2rem;
    font-weight: bold;     vertical-align: top;
    padding: 0 5px;   border: 2px dashed #eee;
    margin: 0 5px;
    min-width: 4rem;
    height: 3.5rem;
    border-radius: 6px;}
.sentence_audio img{width: 2rem;  margin: 0 auto 2rem; cursor: pointer;}
.setence_game_content {max-width: 90%;
    min-width: 70%;
    margin-bottom: 2rem;}

.singleFlashCardMode .wordCardStyle {width: 320px; max-height: 500px;  }

.singleCardMode .wordCardStyle {width: 60%;  }
.singleCardMode .wordCardStyle .flip-box-front{font-size: 8rem;}
.singleCardMode .wordCardStyle .flip-box-front img{width:100% !important;}
.singleCardMode .wordCardStyle .flip-box-back {text-align: left; }
.singleCardMode .wordCardStyle_word {    font-size: 4rem;
    margin-bottom: 1rem;}

.wordCardStyle .wordingMore{display: none;}
.wordingMore{font-size: 1.2rem;}
.singleCardMode .wordCardStyle .wordingMore{display: inline;}

.singleCardMode .wordCardStyle_word_chinese{margin-bottom: 1.5rem;}

.closeKeyboardBtn{    font-size: 0.8rem !important;
    width: 3rem !important; line-height: 1.8rem; vertical-align: top;}

.circular-progress {
  position: relative;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(#4CAF50 75%, #e0e0e0 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.percentage {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

#spellingBookMenuList{grid-template-columns: repeat(4, minmax(4%, 1fr));
    display: grid; 
    margin: 1rem 2rem;
}
.goSpellingPageBtn {display: inline-block;  color: #1c94d6;}


.picStory_MenuDivArea{    
		display: grid;
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    gap: 0px;
		margin: 0 2rem;
		max-height: calc(85% - 3rem);
		overflow: auto;
  }
.picStory_mainImg{width:100%;}
.picStory_subPage{position: fixed;
		background-repeat: no-repeat;
    background-size: cover;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #f7f5e1;
    left: 0;}

.fullScreen_subPage{position: fixed;     border: unset;
    top: 0;
    width: 100% !important;
    height: 100%;
    z-index: 2;
    left: 0 !important;}
    
    
.fullScreen_subPage #specialWin_content{padding-top: 3rem;}    
.fullScreen_subPage #specialWin_content #longTxtArea{width:70%}
.fullScreen_subPage #specialWin_content #longTxtWord{width:30%}

.fullScreen_subPage .longTxtWordItem span{display: block;}
.fullScreen_subPage .longTxtWordItem span:first-child{font-size: 1.2rem;}
.fullScreen_subPage .longTxtRowNav{width:calc(70% - 30px)}

.fullScreen_subPage .wordTableMode {display: none;}

.picStory_detailsOpen{    font-family: arial;
    margin-right: 10px;}    
.picStory_bgImg{width: 100%;
    height: 100%;
    filter: blur(10px);}
    
.picStory_content{position:absolute; width:95%; border: 0.5rem solid #eee; border-radius: 8px;max-height: 95%;overflow: hidden; opacity: 0;
    transition: opacity 0.5s ease;}
.picStory_content.active {
    opacity: 1;
    transform: scale(1);
  }
      
.picStory_wordItem{position: absolute; display: inline-block; padding: 5px 1rem;  border-radius: 8px; cursor: pointer;font-family: 'Helvetica Condensed', 'Roboto Condensed', sans-serif; color: #fff;
    text-align: left;
    padding-left: 1rem;}
    
.picStory_details_win{background: #fffdeb;box-shadow: 0px 4px 1px #ccc;color: #795548;}
.picStory_details_win .picStory_wordDetails{background: #f3f2e7;
    padding: 10px ;
    padding-right: 2rem;
    margin: 1rem 0px;
    border-radius: 4px;
    font-size: 1.2rem;
    line-height: 2rem;
    }
.picStory_details_win .picStory_wordTxt{text-shadow: unset; color: unset; font-size: 2rem !important;line-height: 2rem; margin-left: 1rem;}
.picStory_details_win .picStory_wordText_span{text-shadow: unset; }
.picStory_onPlay .picStory_wordTxt{text-shadow: unset;}

.picStory_wordText_span {text-shadow: 0px 0px 2px black;padding-left: 5px;}
.text-shadow{  text-shadow: 0px 0px 2px black;}   
.picStory_wordTxt{
    font-size: 1.8rem;
    color: #ffeb3b;
    font-weight: 600;}
.move_block{cursor: move;   user-select: none;right: 10px;}
.picStory_icon{width: 1rem;
    margin: 0 0.5rem;
    cursor: pointer;
    display: inline-block;
    vertical-align: top;}
    
.picStory_detailsOpen{}
.picStory_class_title{position: fixed;
    top: 0;
    color: #795548;
    font-weight: 600;
    font-size: 1.5rem;
    background: #eee;
    padding: 5px 1rem;
    z-index: 3;
    border-bottom-right-radius: 1rem;
   	width: fit-content;
    left: 0;
    font-family: 'Helvetica Condensed', 'Roboto Condensed', sans-serif;
    height: calc(1.5rem + 12px);
    line-height: 1.5rem;
    /*left: 0;
    right: 0;
    margin: 0 auto;*/
    }
.picStory_class_title span{display: inline-block; 
    color: #FFF;
    padding: 2px 4px;
    border-radius: 8px;}
.picStory_class_title span:first-child{background: #795548; margin-right: 1rem;}  
.picStory_class_title span:last-child{color: #795548;}    

.picStory_window{position: fixed;
    z-index: 5;
    width: 95% ;
    left: 2.5% ;}    
.picStroy_navTools{left: 0;
    right: 0;
    margin: 0 auto;
    position: absolute; 
    width: 50%;
    display: grid;
    grid-template-columns: repeat(6, minmax(50px, 1fr));
    background: #eee;
    bottom: 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    /*border-top-left-radius: 8px;
    border-top-right-radius: 8px;*/
}
.picStroy_navToolsSel{background:#795548;color: #FFF !important;}   
.picStroy_navTools div{display: inline-block;display: inline-block;
    font-size: 0.875rem;
    padding: 4px 6px;
    color: #795548;
    cursor: pointer;} 
.picStroy_navTools div:first-child{padding-left: 10px;}
.picStroy_navTools div:last-child{padding-right: 10px;}
.picStory_autoPlay{}    

/*.picStory_autoPlay{position: absolute;
    bottom: -5px;
    z-index: 4;
    width: 10%;
    text-align: center;
    right: -5px;
    background: #eee;
    border-radius: 8px;
    padding: 5px 0;
    color: #795548;
    
    cursor: pointer;
    font-weight: 600;}    */

.picStory_closeWord{position: absolute;
    bottom: -5px;
    z-index: 4;
    text-align: center;
    left: -5px;
    background: #eee;
    border-radius: 8px;
    padding: 5px;
    color: #795548; 
    cursor: pointer;
    font-weight: 600;}       
    
.picStory_wordDetails{}

.picStory_sentence_details {line-height: 1.5rem; margin: 0.5rem 0;}
.picStory_sentence_icon{    width: 1rem;
    display: inline-block;
    margin: 0.3rem 0.5rem;
    position: absolute;}
.picStroy_big{
  	padding: 5px 2rem 10px; 
  	    min-width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
#picStory_title_icon{background: #f7f5e1; display: inline-block;
    border-radius: 0.5rem;
    padding: 0 4px;
    font-size: 1.5rem;
    vertical-align: middle;
    margin-right: 0.5rem;}
#picStory_title_icon img{min-height: 1.5rem;}
.picStory_back_mainPage{background: #FFF;
    position: fixed;
    right: 0;
    top: 0;
    padding: 5px 10px;
    border-bottom-left-radius: 1rem;
    color: #795548;
    font-weight: 600;
    z-index: 3;
    cursor: pointer;}
    

.picStory_wordItem_firstLine {margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;}    
.picStory_wordIcon{font-size:2rem; margin-right:1rem;   max-width: 2rem; display: inline-block; white-space: nowrap;}
.picStory_wordTxt_div{display: inline-flex;  align-items: center;}
.picStory_nextWord{float:right;}
.picStory_nav{    position: absolute;
    width: 100%;
    left: 0;
    top: 40%;}
.picStory_closeBtn{    border-radius: 50%; background: #f7f5e1;
    position: absolute;
    right: 0;}
.picStory_onPlay{background: #ffc107; padding: 5px;}   
.picStory_onPlay .picStory_wordTxt {color: #FFF;}  
.picStory_onPlay .picStory_wordText_span  {text-shadow: unset;font-weight: 600;}   
.picStory_nextWord{transform: rotate(180deg);}

    
.picStorySmallFont .picStory_wordTxt{font-size:1.2rem;}  
.picStorySmallFont .picStory_back_mainPage{top:1rem;}  
.picStorySmallFont .picStory_internalTopTitle{}     

.picStory_preSlide{float: left;
    background: #eee;
    padding-left: 15px;
    padding-right: 5px;
}    
.picStory_nextSlide{float: right;
    background: #eee;
    padding-left: 15px;
    padding-right: 5px;
    transform: rotate(180deg);
}    

.picStory_internalTopTitle{font-size: 1.2rem;}
.picStory_startTitle{top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    height: unset;
    font-size: 2rem;
    padding: 1rem 2rem;}   

.close-btn-rightTop {position:absolute; right:2px; top:2px;}     
.close-btn { 
      width: 20px;
      height: 20px; 
      border: none;
      cursor: pointer;
      outline: none;
    }
    
    .close-btn::before,
    .close-btn::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 15px;
      height: 2px;
      background-color:#795548;
    }
    
    .close-btn::before {
      transform: translate(-50%, -50%) rotate(45deg);
    }
    
    .close-btn::after {
      transform: translate(-50%, -50%) rotate(-45deg);
    }
    
    /* 悬停效果 */
    .close-btn:hover::before,
    .close-btn:hover::after {
      background-color: #f00;
    }
    
    /* 点击效果 */
    .close-btn:active {
      transform: scale(0.9);
    }
    
.back-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      /*background-color: #f0f0f0;*/
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      color: #795548;
      transition: all 0.3s ease;
    }
    
    .back-btn:hover {
      background-color: #e0e0e0;
    }
    
    .back-btn:active {
      transform: scale(0.98);
    }
    
    .back-btn::before {
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      margin-right: 8px;
      border-left: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(45deg);
    }
    

.bookWin_content{text-align: left; }
.bookWin_content input, .bookWin_content textarea{border: 1px solid #eee;
    margin: 0.5rem;
    width: 98%;
    padding: 5px 10px;
    line-height: 1.5rem;}
.longTxt_editInputTitle{ padding:0 1rem ; font-weight: 600; font-size:1rem;}
.longTxt_edit_from {   max-height: calc(100% - 12rem); margin:0 1rem ; overflow: auto;}
.floatRight{float:right;}

#longTxt_editForm_wordData .longTxtWordItem{margin:2px 5px ; display: inline-block;}
#longTxt_editForm_wordData .longTxtWordItem span:nth-child(3){display: none}
#longTxt_editForm_wordData .longTxtWordItem span:nth-child(4){display: none}

#ai_framePage, .aiHalfWindow {display: inline-block; width:49%; margin:0 5px;}
.ai_keyword_htmlDiv{padding: 5px 10px ; text-align: left; max-height: 10rem; overflow: auto;font-size: 0.875rem;
    line-height: 1.2rem;overflow-x: hidden;
    margin: 1rem 0;}
.longTxt_edit_nav span{ cursor: pointer; margin:0 5px; background: #fdf9ed; position: relative; }
.longTxt_edit_navSel {background: #f9ebbe !important;  color: #776d4c  !important;}
.longTxt_edit_navSel div{ display: block !important;}
.longTxt_edit_nav span div{ display: none; position: absolute;
    right: -10px;
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #f9ebbe ;}

.longTxt_edit_nav{margin: 4rem 1rem 1rem; font-size: 1rem;}
#longTxt_editForm_textarea_dataReview{width: 96%;margin: 0 2%;}
#longTxt_editForm_textarea_dataReview tr td{margin: 0;
    min-width: 6rem;
    padding: 5px;
    background: #eee;
    border: 2px solid #FFF;
    white-space: nowrap;}
#longTxt_editForm_textarea_dataReview tr td:nth-child(5){width:35%;}
.longTxt_btnArea{max-height: calc(100% - 8rem);  margin: 0 2rem;}

.pdfPrintStyle .longTxtSetupArea {display: none;}
.pdfPrintStyle .longTxtWordArea {display: unset;} 
.pdfPrintStyle #longTxtArea {text-align: left;}
.pdfPrintStyle .longTxtWordItem {display: block; text-align: left; margin-bottom: 10px; color: #333; padding:12px 8px;}
.pdfPrintStyle .longTxtWordItem span {display: block;}
.pdfPrintStyle .longTxtWordItem img{display: none;}
.pdfPrintStyle .actionPan, .pdfPrintStyle .screen{bottom:unset; position: unset; }
.pdfPrintStyle .longTxtRowNav{display: none;}
.pdfPrintStyle .longTxtSubPageNav{display: none;}
.pdfPrintStyle .longTxt_toWordPageBtn{display: none;}
.pdfPrintStyle .totalWordsInPage {display: none;}
.pdfPrintStyle .longTxtWordItem span:nth-child(2) {display: block;line-height: unset;overflow: unset;}
.pdfPrintStyle .specialWord div:last-child{
	display: block;      /* 使用弹性盒子布局 */
  -webkit-line-clamp: unset;     /* 限制显示行数 */
  -webkit-box-orient: unset; /* 垂直排列 */
 	overflow: unset;
 	text-overflow: unset;
 	line-height: unset;
 }
 
.word_printListTitle {font-size: 1.05rem; font-weight: 600;}
.word_printListTitle div{text-align: right; }
 
.pdfPrintStyle .wordListNoPrint{display: none !important;}
.pdfPrintStyle .word_list_div {overflow: unset;}
.pdfPrintStyle .word_printListTitle{display: block !important; width: 100%;
    top: 1rem;
    font-size: 1.2rem;}
.pdfPrintStyle .word_printListTitle div{text-align: right; font-size: 1rem; padding-right: 5%;}
.pdfPrintStyle .word_list_div {    margin-top: 1rem;height:unset; position:unset; }
.pdfPrintStyle #specialWin_content {display: block;}

.pdf-page-break {display: none;}
.pdfPrintStyle .pdf-page-break {display: block;}
.noPrintSpace  .pdf-page-break {display: none !important;}

.pdfPrintStyle .lineMiddle{ text-align: left;}
.pdfPrintStyle .wordItemSpanInList{display: inline-block;}
.pdfPrintStyle .WordingCardArea .card_pic{ }
.pdfPrintStyle .WordingCardArea{max-height: unset;}
.pdfPrintStyle .word_list_tableDiv div{padding:5px; overflow: visible; }
.pdfPrintStyle .sentenceIcon{display: inline-block; line-height: 1; vertical-align: middle; /* 确保垂直居中 */
    overflow: visible !important; /* 防止裁剪 */}
.pdfPrintStyle .flashCard_borderShell i{display: none;}

.longTxtPageBtn {
    font-size: 0.875rem;
    padding: 0 4px;
    background: #3f51b5;
    line-height: 1rem;
    border-radius: 4px;
    color: #FFF;display: inline;
    cursor: pointer;
    margin-left: 0.5rem;}
.longTxtPageImage {height: 12rem;
    background: #f3f2f2;
    border-radius: 6px;
    overflow: hidden; border: 2px dashed #e8e8e8;
    border: 1px solid #eee; cursor: pointer;}
    
.longTxtPageImage img{width:100%;}
.longTxtSingleSentenceDemo{padding: 1rem;
    border-radius: 6px;
    margin-top: 0.5rem;
    background: #f7f7f7;
    font-size: 0.875rem;
    display: block;
    position: relative;
    border: 1px solid #efefef;}

.longTxtSingleSentenceDemo .close-btn,.longTxtChineseRow .close-btn  {position:absolute; right:0; top:0;background: #FFF;
    border-bottom-left-radius: 6px;}
.longTxtSingleSentenceDemo  .close-btn::before,
.longTxtSingleSentenceDemo  .close-btn::after {  background-color:#5867b9;}

.titleInSetenceDemo {    font-size: 1.05rem;
    font-weight: 600;
    color: #333;
    line-height: 1.2;}
.titleInSetenceDemo .specialWin_content_span{cursor: pointer; padding: 0 2px;}
.titleInSetenceDemo .specialWin_content_span:hover{background:#FFF;}
.titleInSetenceDemo .specialWin_content_span .active{background:#FFF;}

.wordDetailsInSetenceDemo span:nth-child(1) {color:#5867b9; font-size: 1rem; display: inline-block; 
    border-left: 5px solid;
    line-height: 0.4rem;
    padding-left: 5px;}
.wordDetailsInSetenceDemo span:nth-child(2) {color:#5867b9; font-size: 1rem; display: inline-block; }
.wordDetailsInSetenceDemo span:nth-child(3) {display: block; padding-left: 5px; }
.wordDetailsInSetenceDemo span:nth-child(4) {padding-left: 5px; }
.wordDetailsInSetenceDemo span {font-size: 0.875rem; margin-right: 1rem;} 
.wordListInSetenceDemo{margin-top:0.5rem;}
.aiEditBtnStyle{background: #bfaf7c !important;border:unset;color: #FFF !important;    font-size: 1.05rem;
    font-weight: 600;}
.lineCenterDiv{display: inline-flex;
    align-items: center;
    width: 100%;}
#isOpenPageShare{width: 10px;
    display: inline-block;
    height: 20px;
    vertical-align: top;
    margin: unset;}
.wordListInSetenceDemo{display: flex; flex-wrap: wrap;}
.wordDetailsInSetenceDemo{flex: 1 0 calc(50% - 4px);}
.longTxt_wordListPage .longTxtWordArea{padding: 0 5%;}
.longTxt_wordListPage #longTxtArea , .longTxt_wordListPage .longTxtSetupArea , .longTxt_wordListPage .longTxtRowNav {display: none;}
.longTxt_wordListPage #longTxtWord{width:100%;}
.longTxt_wordListPage .longTxtWordItem span{display: block !important; font-size: 1rem !important;}
.longTxt_wordListPage .longTxtWordItem span:nth-child(1){font-size: 1.5rem !important; margin:0.5rem 0 1rem;}
.longTxt_wordListPage .longTxtWordItem {padding: 1rem;} 
.longTxt_wordListPage .longTxtWordAudioIcon{    width: 1.2rem;
    right: 1rem;
    top: 1rem;}
.longTxt_wordListPage .longTxtWordArea{gap:0.5rem;}
.no-pointer-events {
  pointer-events: none; /* 子元素不响应点击事件 */
}
.shareLinkTxt{width:98%;
		margin-left:1%;
    background: #eee;
    padding: 5px 10px;
    word-break: break-all;
    font-size: 0.875rem;
    line-height: 1.2rem;}
.viewCodeArea {    min-width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 0.5rem;
    font-size: 1rem;
    padding: 0.5rem 2rem 0.5rem;
}
.viewCodeArea input {background: #f3fafd;
    border-radius: 0.5rem;
    margin: 0 0.5rem;
    border: 2px solid #deeff7;
    font-size: 1rem;
    line-height: 1rem;
    padding: 6px;
    vertical-align: top;
    text-align: center;}

.viewCodeAreaTitle{
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1.5rem;
    padding: 0rem 0 1rem;
    color: #5488a5;
}
.shareSetupArea input{display: inline-block; width:auto;}
.guideCreating{background: #eee;
    color: #777;
    padding: 0 5px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.875rem;
    position: relative;
    margin-right: 4px;}
.guideCreating span{position: absolute;
    right: -5px;
    top: 3px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #d9d9d9;}

.helpContentNav span {display:inline-block; border-radius: 6px; cursor: pointer;}
.helpContentNavSel {color:#FFF; background: #bfaf7c;}    

.printBtnArea button i{margin-right:1rem;}
.printBtnArea button{    margin: 0 0.5rem 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    font-size: 1rem;
    text-align: center;}
.printBtnArea img{    margin: auto; max-height: 15rem;
    margin-bottom: 1rem;}
.word_printListTitle{}


.flashCard_editMode .WordingCardArea{width:calc(100% - 22rem) !important; left:1rem;top: 50%;  transform: translate(0, -50%);  margin:unset;   height: 95%;}
.wordList_editMode .word_list_div {width: calc(100% - 22rem) !important;
    left: 0.5rem;
    margin: unset;
    top:7rem;
    max-height: calc(100% - 7rem);}
    
.wordList_editMode #wordListPrint  {display: none;}
.wordList_editMode .word_printListTitle{display: block; position: absolute; width: calc(100% - 25rem) !important;
    left: 1rem;
    top: 3rem;}
    
.wordList_floatEditBtnArea  {display: none;}
.wordList_editMode .word-card .wordList_floatEditBtnArea  {display: block;}
.wordList_editMode .word-card .sentenceWord img {display: none !important;}


.flashCard_editMode .flash_card_bottom, .wordList_editMode .wordList_edit_pageArea {width: 20rem;
    right: 1rem;
    bottom: unset;
    top: 50%;
    transform: translate(0, -50%);
    height: 100%;
    padding: 3rem 4px 0;}
.flashCard_editMode .flash_card_bottom .blueTxtBtn , .wordList_edit_pageArea  .blueTxtBtn {text-align: left;  padding-left: 10px;}
    
    
.flashCard_editMode .flashCard_downloadBtn  {display: none;}
.flashCard_editMode .flashCard_audioBtn{display: none;}
.flashCard_editMode .flashCard_editPageBtn , .wordList_editMode .wordList_editPageBtn{width: 98%; margin: 0 auto 0.5rem; }
.flashCard_editMode .flashCard_editPageCheckBox , .wordList_editMode .wordList_editPageCheckBox{width: 48%; display: inline-block;
    margin: 0 0.5% ;
    }
.flashCard_editPageBtnStyle , .wordList_editPageBtnStyle{padding: 0.5rem;
    color: #2fa3e2;
    border-radius: 6px;
    background: #f1faff;}    
    
.flashCard_colorSet , .flashCard_fontColorSet{height: 1rem; }   
.flashCard_closeEditWinBtn{}

.positionCenter {top: 50%; left: 50%; transform: translate(-50%, -50%);}  
.flashCard_borderShell{margin: 0.5rem;
    position: relative;
    border-radius: 6px;
    background: #FFF;
    width: calc(100% - 1rem) !important;
    height: calc(100% - 1rem) !important;
}
.flashCard_editMode .flashCard_floatEditBtnArea{display: block !important;}
.flashCard_floatEditBtnArea{position: absolute; top:0;     z-index: 4;  right: 0.5rem;cursor: pointer;}

.flashCard_onecard{padding:20% 15%;} 
.flashCard_onecard .card_pic div{font-size: 6rem;} 
.flashCard_bigTxtArea .card_text {height:30%;}
.flashCard_6card{padding: 15% 1rem;} 
.flashCard_onPrint i{display: none}


.flashCard_onecard .flashCardWordSentenceMode .card_text span:nth-child(1){    margin-top: 1rem;} 
.flashCard_onecard .flashCard_borderShell{    margin: 1rem;
    border-radius: 12px;
    background: #FFF;
    width: calc(100% - 2rem) !important;
    height: calc(100% - 2rem) !important;}
    
.flashCard_2card{padding: 1rem;}
.flashCard_2card .card_pic div{font-size: 5rem;} 
.flashCard_2card .card_text span:nth-child(1){    margin: 1rem 0; text-align: left;} 
.flashCard_2card .card_pic {width: 50%; height: 100%;}
.flashCard_2card .card_text{width: 50%;
    right: 1rem;
    top: 25%;
    text-align: left;}
.flashCard_2card .card_text span{display: block !important;}

.flashCardWordSentenceMode .card_text{height: 100%;}
.flashCardWordSentenceMode .card_text span:nth-child(2){display: none !important; }
.flashCardWordSentenceMode .card_text span:nth-child(3){display: block !important; position: absolute;
    bottom: 10%;    width: 100%;    padding: 0 0.5rem;  line-height: 1; left: 0;}
.flashCardWordSentenceMode .card_text span:nth-child(4){display: none !important;}

.flashCardWordSentenceMode .card_pic{margin-top: 3rem;padding: 15% 5%;}

.flashCard_editPage_setupArea , .wordList_editPage_setupArea{    position: absolute; width:100%;
    height: calc(100% - 11rem);
    overflow: auto;}
.flashCard_phoneticItem {display: none;}

.spelling_option{background: #f3fafd;color: #677c88;}

.spelling_option:hover {
    background-color: #b3e0ff;
}
.spelling_option.selected {
    background-color: #d4edda;
    border-color: #c3e6cb;
}
.spelling_option.wrong {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    animation: shake 0.5s;
}
.spelling_option.wrong img{   width: 1.2rem; height: 1.2rem;
    display: inline-block;
    position: absolute;
    right: 5px;}
.spelling_option.correct {background-color: rgb(67 97 238 / 20%);
    border-color: #cfd7ff;
    color: #4361ee;
    font-weight: bold;}
    

#flip-box-Mode {color: #82a0af;}

.singleFlashCardMode_img{    width: 100%;
    height: 50%;
    font-size: 5rem;}
.singleFlashCardMode .wordCardStyle_word_chinese{display: none; margin-top:1.5rem; font-size: 1.5rem;}
.singleFlashCardMode .wordCardStyle_word {font-size: 3rem;}

.singleCardSpaceHeight{    max-height: calc(100% - 8rem);}
.singleFlashCardMode_img img{border-radius: 6px;}

.wordList_edit_pageArea {display:none;}

.bigBtnFont{font-size: 1.05rem; font-weight: 600;}

.helperVideoArea .helper_video{padding: 0.5rem;
    background: #e9f3ff;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    overflow: hidden
    font-size: 1rem;}
.helper_video div:first-child{    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    font-size: 1rem;
    background: #60a5fa;
    color: #FFF;
    padding: 2px 4px; 
    font-weight: 600;
    width: 100%;}
.helper_video img{aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    padding: 10%;
    margin: 0.5rem auto 0;}